我想以 0-100% 的間隔設定 Y 軸0-25-50-75-100。
為此，我將刻度設定為 4。
但我可以看到 Y 軸的間隔0-20-40-60-80-100
如何在 0-25-50-75-100 的間隔內設定 Y 軸？
我有以下代碼 -
const extent=[0,100];
const yScale = scaleLinear().domain(extent).range([height, 0]);
const x0Scale = scaleBand()
.domain(data.map((d) => d.month))
.range([0, width])
.padding(0.46);
const x1Scale = scaleBand()
// .domain(data.map((d) => d.type))
.rangeRound([0, x0Scale.bandwidth()])
.padding(0.22);
const xAix = axisBottom(x0Scale);
const yAix = axisLeft(yScale);
svg
.select(".x-axis")
.attr("transform", `translate(${xMargin}, ${height yMargin})`)
.style("font-weight", "bold")
.style("font-size", "0.700rem")
.call(xAix);
svg
.select(".y-axis")
.attr("transform", `translate(${0 xMargin}, ${yMargin} )`)
.style("font-weight", "bold")
.style("font-size", "0.725rem")
.call(yAix.ticks(4).tickSize(-width).tickFormat(function(d){return d "%"}));
uj5u.com熱心網友回復：
d3 優先考慮某些刻度功能，您可以通過 tickValues(d3.range(minValue, maxValue, noOfSteps)) 強制刻度值；. 在你的情況下
yAix.tickSize(-width).tickValues(d3.range(0,100,4).tickFormat(function(d){return d "%"})
或使用 tickValues(d3.range(d3.min(dataarray),d3.max(dataarray),noOfticks))
uj5u.com熱心網友回復：
使用tickValues而不是ticks.
svg
.select(".y-axis")
.attr("transform", `translate(${0 xMargin}, ${yMargin} )`)
.style("font-weight", "bold")
.style("font-size", "0.725rem")
.call(yAix
.ticksValues([0, 25, 50, 75, 100])
.tickSize(-width)
.tickFormat(function(d){return d "%"}));
ticks僅用作提示 - d3 可能會顯示更多或更少的刻度，具體取決于比例和可用的螢屏空間。
tickValues允許您選擇要顯示刻度的確切值。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/491881.html
標籤：javascript html jQuery 反应 d3.js
上一篇：導航（'/'）不導航