D3 坐标轴的使用

坐标轴根据数据不同而动态更换的方法

• 先准备好坐标轴的位置，调用坐标轴的时候再call，即可达到根据数据动态更新坐标轴属性
• 事先定义好rangeRound，在调用drawchart（自己定义的绘图函数）的时候，再根据数据设置domain属性。

  // 提前定义坐标轴
var x = d3.scaleBand().rangeRound([0,width]),   
      y = d3.scaleLinear().rangeRound([height,0]),    
      xaxis = d3.axisBottom(x),
      yaxis = d3.axisLeft(y);

  // 定义坐标轴的位置
svg.append("g")    
    .attr("class","axis axis--x")   
    .attr("transform","translate(0," + height + ")");
svg.append("g")    
    .attr("class","axis axis--y")

  // 需要用到坐标轴的时候。
  // 也就是在画图时，定义坐标域，调用x,y坐标轴。
x.domain(Y.map((d) => (d[2])))
y.domain([0, num])
svg.select("g.axis--x").call(xaxis)
svg.select("g.axis--y").call(yaxis)

坐标轴设置ticks的text属性

xaxis = d3.axisBottom(x)
    .tickFormat((d)=>d.substring(0,2))