坐標(biāo)軸根據(jù)數(shù)據(jù)不同而動態(tài)更換的方法
先準(zhǔn)備好坐標(biāo)軸的位置溅固,調(diào)用坐標(biāo)軸的時(shí)候再call募书,即可達(dá)到根據(jù)數(shù)據(jù)動態(tài)更新坐標(biāo)軸屬性
事先定義好rangeRound异雁,在調(diào)用drawchart(自己定義的繪圖函數(shù))的時(shí)候华临,再根據(jù)數(shù)據(jù)設(shè)置domain屬性窘行。
// 提前定義坐標(biāo)軸
var x = d3.scaleBand().rangeRound([0,width]),
y = d3.scaleLinear().rangeRound([height,0]),
xaxis = d3.axisBottom(x),
yaxis = d3.axisLeft(y);
// 定義坐標(biāo)軸的位置
svg.append("g")
.attr("class","axis axis--x")
.attr("transform","translate(0," + height + ")");
svg.append("g")
.attr("class","axis axis--y")
// 需要用到坐標(biāo)軸的時(shí)候饥追。
// 也就是在畫圖時(shí),定義坐標(biāo)域罐盔,調(diào)用x,y坐標(biāo)軸但绕。
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)
坐標(biāo)軸設(shè)置ticks的text屬性
xaxis = d3.axisBottom(x)
.tickFormat((d)=>d.substring(0,2))
最后編輯于 :2017.12.05 03:03:59
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者