在学习d3时候，发现在TS中实现D3的坐标轴中遇到一些错误，而这些错误却不会存在于js（因为ts的类型检查）写法中，因此做下笔记：

import * as d3 from 'd3'; import * as React from 'react'; class TestGraph extends React.Component {
       public componentDidMount() {
           const marge = {
               top: 60,             bottom: 60,             left: 60,             right: 60         };         const dataSet: any[] = [10, 20, 30, 23, 13, 40, 27, 35, 20];         const svg = d3.select("svg");         const g = svg.append("g")             .attr("transform", `translate(${marge.top},${marge.left})`);         const width: any = svg.attr('width');         const height: any = svg.attr('height');         // 此处必须把.domain里的参数转为字符串数组，不然会报类型错         const xScale = d3.scaleBand()             .domain(d3.range(dataSet.length).map(value => {
                   return value.toString();             }))             .rangeRound([0, width - marge.left - marge.right]);         const xAxis = d3.axisBottom(xScale);         const yScale = d3.scaleLinear()             .domain([0, d3.max(dataSet)])             .range([height - marge.top - marge.bottom, 0]);         const yAxis = d3.axisLeft(yScale);         const gs = g.selectAll(".rect")             .data(dataSet)             .enter()             .append("g");         const rectPadding = 20;// 矩形之间的间隙         const rectWidth = xScale.step();         gs.append("rect")             .attr("x", (d, i) => {
                   // 此处不能用xScale(i)，因为参数只能接受string，就算使用i.toString()，也会报错此对象有可能为undefined                 return xScale.step() * (i + xScale.paddingOuter()) + rectPadding / 2;             })             .attr("y", d => {
                   return yScale(d);             })             .attr("width", rectWidth - rectPadding)             .attr("height", d => {
                   return height - marge.top - marge.bottom - yScale(d);             })             .attr("fill", "blue");         const fontSize = 14;         gs.append("text")             .attr("x", (d, i) => {
                   return xScale.step() * (i + xScale.paddingOuter()) + rectPadding / 2;             })             .attr("y", d => {
                   return yScale(d);             })             .attr("dx", (xScale.step() - rectPadding) / 2 - fontSize / 2)             .attr("dy", 20)             .attr("font-size", fontSize)             .text(d => {
                   return d;             });         g.append("g")             .attr("transform", `translate(0,0)`)             .call(yAxis);         g.append("g")             .attr("transform", `translate(0,${yScale(0)})`)             .call(xAxis);     }     public render() {
           return (             
     
               )     } } export default TestGraph;
     

效果如下：