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

在妥善解决是检索蜱使用.ticks()方法，过滤他们只保留整数，并将它们传递到.tickValues()：

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

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

@BoomShakalaka解决方案使用的.tickSubdivide()方法不再存在。

@cssndrx和@kris解决方案会强制您指定刻度数，因此在一般情况下将不起作用。

Answer 3

您可以以编程方式设置刻度数data.length - 1(这解决了您对少量刻度的问题)

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