在学习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 ( <svg width={960} height={600}/> ) }}export default TestGraph;
效果如下：
