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

Question

我有一个d3（3.5版）多折线图，我正尝试在y轴上打5个刻度。

这是y轴生成的代码，带有刻度的数量：

问题在于，我输入的3到6之间的任何刻度值都会产生相同的以下结果（刻度值比我想要的要少）：

当我将值设置为7个滴答时，它给出以下结果（滴答声比我想要的要多）：

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

谢谢。

Answer 1

根据documentation（正在炸雷）：

  

无状态方法，返回近似计数代表   秤的输入域中的值。如果未指定count，则为   默认值为10。返回的刻度值是均匀间隔的，具有   易于理解的值（例如10的幂的倍数），并且是   保证在输入域的范围内。 cks是   通常用于同时显示参考线或刻度线   可视化数据。 指定的计数只是一个提示；的   scale可能会根据输入域返回更多或更少的值。

d3不能兑现您的刻度数的原因是，您最终会得到间距不均匀的刻度线或非很好的，非人类可读的值。

如果您确实想要5个刻度，则需要使用tickValues方法自行指定。我过去这样做的一种方法是使用d3 range方法。假设我的输入域在您的第一个图表中显示为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);

结果：