javascript - 如何将 d3.svg.axis 限制为整数标签？

Question

是否有可能限制图表上显示的 d3.svg.axis 整数标签的数量？以这张图为例。这里只有 5 种尺寸：[0, 1, 2, 3, 4]. 但是，也会显示.5, 1.5, 2.5和的刻度3.5。

Answer 1

您应该能够使用d3.format而不是为此编写自己的格式函数。

d3.svg.axis()
    .tickFormat(d3.format("d"));

您还可以tickFormat在默认情况下自动使用轴的刻度。

Answer 2

我已经意识到隐藏这些值就足够了，而不是完全排除。这可以使用tickFormat（https://github.com/mbostock/d3/wiki/Formatting#wiki-d3_format）来完成，如下所示：

d3.svg.axis()
    .tickFormat(function(e){
        if(Math.floor(e) != e)
        {
            return;
        }

        return e;
    });

Answer 3

as tickFormat的使用d3.format("d")可能不适用于所有情况（请参阅此错误）。在 Windows Phone 设备（可能还有其他设备）上，不精确的计算可能会导致记号不能正确检测为整数的情况，即“3”的记号可能在内部存储为 2.9999999999997，它d3.format("d")不是整数。

结果，轴根本不显示。这种行为在高达 10 的刻度范围内尤其明显。

一种可能的解决方案是通过指定 epsilon 值来容忍机器错误。这些值不必是精确的整数，但可能与下一个整数不同，直到 epsilon 范围（应该远低于您的数据错误）：

var epsilon = Math.pow(10,-7);

var axis = d3.svg.axis().tickFormat(function(d) {
    if (((d - Math.floor(d)) > epsilon) && ((Math.ceil(d) -d) > epsilon))
        return;
    return d;
}

另一种解决方案，在其他线程中也提到过，是指定一个固定的滴答计数，然后将滴答（现在应该是“几乎”整数）四舍五入到最接近的整数。您需要知道数据的最大值才能使其工作：

var axis = d3.svg.axis().ticks(dataMax).tickFormat(d3.format(".0f"))