d3.js - d3 v4 中的 d3.ticks() 通常给出低于范围内最高值的顶部刻度值

Question

In D3 version 4's D3-array module , d3.ticks() 接受一个数组并输出一个适合图表轴标签的圆整值数组:

d3.ticks(start, stop, count)

Returns an array of approximately count + 1 uniformly-spaced, nicely-rounded values between start and stop (inclusive). Each value is a power of ten multiplied by 1, 2 or 5. See also tickStep and linear.ticks...

Ticks are inclusive in the sense that they may include the specified start and stop values if (and only if) they are exact, nicely-rounded values consistent with the inferred step. More formally, each returned tick t satisfies start ≤ t and t ≤ stop.

但是，我没有得到预期的结果。例如，为此:

  d3.ticks( 0, 63500, 7 );

我希望输出如下:

  [ 0, 10000, 20000, 30000, 40000, 50000, 60000, 70000 ]

相反，我得到的是:

  [ 0, 10000, 20000, 30000, 40000, 50000, 60000 ]

... 我的最高值 (63500) 大于图表的最高点，这意味着我希望值超出图表。

请求不同数量的报价并不能解决问题:

• ( 0, 63500, 8 ) 给出相同的东西
• ( 0, 63500, 9 ) 也给出相同的
• ( 0, 63500, 10 ) 给出 [0, 5000, 10000, 15000, 20000, 25000, 30000, 35000, 40000, 45000, 50000, 55000, 60000] 哪个更好
• 从随机试验和错误中，我能找到的唯一实际超过我的最大值的输入是 24，它给出了 [0, 2000, 4000, ... 62000, 64000]
• 这是一个可以传递任何数据集的函数，因此它不需要为每个数据集手动选择的滴答数

为什么会发生这种情况(我是不是误解了什么，或者这是否违反了文档中的“t ≤ stop”)？我如何确保我的报价确实覆盖了我的范围？

---

我看过问题 d3.js scale doesn't place tick at the top它用插图描述了 D3 版本 3 中的类似问题:

...但是版本 4 中的功能不同，答案中的文档链接不适用于 D3 版本 4。

我看过D3-Scale - 指向 linear.ticks() 的链接似乎已损坏 - 但我并不真正理解为什么我正在尝试做的事情需要一个全新的 D3 子模块和缩放算法。

Answer 1

试试这个

getRoundedYMaxValue(number) {
        var numLen = number.toString().length;
        var dividerValue = "1"
        for (var i = 0; i < numLen - 1; i++) {
            dividerValue += 0
        }
        return Math.ceil(number / dividerValue) * dividerValue
    }