如何將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"))