我想在0-25-50-75-100的间隔内将Y轴设置为0- 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 + "%"}));
2条答案
按热度按时间jchrr9hc1#
d3对于某些tick函数具有优先级，您可以通过tickValues（d3.range（minValue，maxValue，noOfSteps））强制执行tick值;.在您的情况下
yAix.tickSize（-宽度）.tickValues（d3.范围（0，100，4）.tickFormat（函数（d）{返回d +“%"}）
或使用tickValues（d3.range（d3.min（数据数组），d3.max（数据数组），无刻度））
de90aj5v2#
使用
tickValues而不是ticks。ticks仅用作提示- d3可能会显示更多或更少的刻度，具体取决于比例和可用的屏幕空间。tickValues可让您选取要显示刻度的精确值。