如何将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.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

使用d3.format("d")作为tickFormat可能不适用于所有场景（ 请参阅此错误 ）。 在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"))