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

使用d3.format("d")作为tickFormat可能不适用于所有情况（see this bug）。在Windows Phone设备（可能还有其他设备）上，不精确的计算可能会导致滴答声未被正确检测为整数，i。即勾选“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"))