d3 仅整数上的刻度线

Question

我有一个 d3 条形图，其值范围为 0-3。我希望 y 轴只显示整数值，我可以这样做

var yAxis = d3.svg.axis().scale(y).orient("right").tickFormat(d3.format("d"));

但是，非整数标记处仍有刻度线。设置刻度格式只会隐藏这些标签。我可以显式设置刻度数或刻度值，但我想做的是能够指定刻度线仅出现在整数值处。这可能吗？

Answer 1

您可以添加 .ticks(4) 和 .tickSubdivide(0)，如下所示：

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("right")
    .ticks(4)
.tickFormat(d3.format("d"))
    .tickSubdivide(0);

Answer 2

您可以以编程方式将滴答数设置为 data.length - 1（这也解决了您在少量滴答时遇到的问题）

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("right")
    .tickFormat(d3.format("d"))
    .ticks(data.length - 1)

Answer 3

使用此 TIP 在动态图表（页面上有 1 个或多个图表）上进行这项工作

成功了。我变成了 Math.min(maxHeight+1,yAxis.ticks()) 所以如果图形高度小于 与刻度数相比，它减少了刻度数。 – 杰夫 2012 年 11 月 28 日 2:47

  // It is either 10 or Maximum Chart height + 1 

        var graphValues = selection.data()[0].map(function(obj) {
            return obj['count'];
        }).compact();  

        Array.prototype.maxValArray = function() {
          return Math.max.apply(null, this);
        };

        var maxValue = graphValues.maxValArray();

        yAxis.ticks(Math.min(maxValue + 1, 10)) 

Answer 4

在所有列出的解决方案中，我都无法去掉勾号。

.xAxis().ticks(4)
.tickFormat(d3.format("d"));

删除标签，但不删除刻度。

所以我建议对 ticks() 应用一个阈值。如果小于 4，则将其设置为限制本身 (0,1,2,3)。已完成：

.on("preRedraw", function(chart) {
    var maxTick = chart.group().top(1)[0].value;
    if (maxTick < 4) {
      chart.xAxis().ticks(maxTick);
    } else {
      chart.xAxis().ticks(4);
    }

});

一个jsfiddle可以从https://jsfiddle.net/PBrockmann/k7qnw3oj/获得

如果有更简单的解决方案，请告诉我。 问候

Answer 5

正确的解决方案是使用.ticks()方法检索刻度，过滤它们以仅保留整数并将它们传递给.tickValues()：

const yAxisTicks = yScale.ticks()
    .filter(tick => Number.isInteger(tick));
const yAxis = d3.axisLeft(yScale)
    .tickValues(yAxisTicks)
    .tickFormat(d3.format('d'));

---

为了完整起见，这里解释一下为什么其他解决方案不好：

@BoomShakalaka solution 使用 .tickSubdivide() 方法，该方法已不存在。

@cssndrx and @kris solutions 强制您指定刻度数，因此在一般情况下不起作用。