如何在 d3.js 中为 y 轴设置最小步长？

Question

我有一个条形图，其中值的范围是 0 到 5。值只能是整数（0、1、2、3、4、5）。

但是，y 轴以较小的步长呈现，例如 0、0.5、1、1.5、2 等。我只想将轴值设置为整数，但使用域和范围对我没有帮助全部。

我没有看到设置类似minimalInterval = 1 的选项。我该怎么做呢？我敢肯定在某个地方有一个选择。坐标轴的当前代码：

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
    y = d3.scaleLinear().rangeRound([height, 0]);

x.domain(data.map(function(d) { return d.day; }));
y.domain([0, d3.max(data, function(d) { return d.value; })]);

g.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x))
    .selectAll("text")
    .attr("y", 0)
    .attr("x", 9)
    .attr("dy", ".35em")
    .attr("transform", "rotate(90)")
    .style("text-anchor", "start");

g.append("g")
    .attr("class", "axis axis--y")
    .call(d3.axisLeft(y))
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", "0.71em")
    .attr("text-anchor", "end");

Answer 1

对于 D3 生成的轴，没有什么比 steps 更好的了。

但是，就您而言，解决方案很简单：您可以将tickValues 与d3.range(6) 和整数格式化程序一起使用，或者更简单的是，您可以使用ticks。

根据 API，

设置在渲染轴时将传递给 scale.ticks 和 scale.tickFormat 的参数，并返回轴生成器。参数的含义取决于轴的刻度类型：最常见的是，参数是刻度数的建议计数（或时间刻度的时间间隔），以及用于自定义刻度值格式的可选格式说明符.

所以，在你的情况下：

axis.ticks(5, "f");

其中5 是计数，f 是定点符号的说明符。

这是一个演示（带有水平轴）：

var svg = d3.select("svg");
var scale = d3.scaleLinear()
  .domain([0, 5])
  .range([20, 280]);
var axis = d3.axisBottom(scale)
  .ticks(5, "f")
var gX = svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(axis)

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

为了完整起见，相同的代码没有ticks：

var svg = d3.select("svg");
var scale = d3.scaleLinear()
  .domain([0, 5])
  .range([20, 280]);
var axis = d3.axisBottom(scale);
var gX = svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(axis)

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>