如何在d3图表中强制特定数量的y轴刻度？

Question

我有一个d3(版本3.5)多线图,我试图在y轴上有5个刻度.

这是y轴生成的代码,带有ticks数:

问题是我输入的任何滴答值,在3到6之间,给出了相同的结果(比我想要的滴答更少):

当我输入7个滴答值时,它会得到以下结果(这比我想要的多得多):

如何强制图表在y轴上具有确切的刻度数？

谢谢.

Answer 1

根据文件(bolding mine):

无状态方法,从比例的输入域返回近似计数代表值.如果未指定count,则默认为10. 返回的tick值均匀分布,具有人类可读的值(例如10的幂的倍数),并且保证在输入域的范围内.刻度通常用于显示参考线或刻度线,以及可视化数据.指定的计数只是一个提示; 根据输入域,比例可能会返回更多或更少的值.

之所以d3不尊重你的滴答计数,是因为你最终得到的是不均匀间距的滴答或非好的,非人类可读的值.

如果你真的想要5个刻度,你需要使用tickValues方法自己指定它们.我过去做过这种range方法的一种方法是使用d3 方法.假设我的输入域在第一个图表中显示为20到170,然后:

var step = 5,
    min = 20,
    max = 170,
    stepValue = (max - min) / (step - 1),
    tickValues = d3.range(min, max + stepValue, stepValue);
    
console.log(tickValues);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.min.js"></script>

Answer 2

感谢@Mark，这是完整的解决方案。

为了在y轴上具有人类可读的值，我将刻度线四舍五入到最接近的5。

// y axis
    const ticksAmount = 5;
    const tickStep = (maxValue - minValue) / (ticksAmount);
    const step = Math.ceil(tickStep / 5) * 5;
    const yAxis = d3.svg.axis()
        .scale(yScale)
        .orient('left')
        .ticks(ticksAmount)
        .tickValues(d3.range(minValue, maxValue + step, step))
        .tickFormat(d3.format('d'))
        .innerTickSize(-width)
        .outerTickSize(0)
        .tickPadding(5);

结果：