d3.js :坐标轴

参考链接：https://github.com/d3/d3/blob/master/API.md#axes-d3-axis

首先,d3可以生成4种轴，分别是向上，向下，向左，向右, 所以轴生成器api有axisTop,axisButtom,axisLeft,axisRight

这里只是单纯的记录如何在svg上画出一个比例尺的简单思路

首先当然是定义一个合适比例尺，比如线性比例尺

let dataset = [12,45, 130]
let scaleLinear = 
    d3.scaleLinear().domain([0, d3.max(dataset)]).range([0, 250]) // 线性

然后是定义一个坐标轴，根据需要选择以上的任意一种

      // 定义一个坐标轴
      let xAxis = d3.axisRight()

接着是坐标轴和比例尺结合，利用坐标轴的方法scale

xAxis.scale(scaleLinear)

最后是将坐标轴放进svg,用call，谁要将坐标轴谁就去call它

比如直接放进svg

svg.call(xAxis) // 也可以写成xAxis(svg)

或者放进svg添加的一个组

      svg.append('g').attr('width', 320)
        .attr('height', 320)
        .attr('transform', 'translate(10, 10)').call(xAxis)

这样就可以了

结果