坐标轴根据数据不同而动态更换的方法
- 先准备好坐标轴的位置,调用坐标轴的时候再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))