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

没有什么比stepsD3 生成的轴更好的了。

\n\n

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

\n\n

根据API，

\n\n

\n

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

\n

\n\n

所以，就你而言：

\n\n

axis.ticks(5, "f");\n

\n\n

5计数和f是定点表示法的说明符。

\n\n

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

\n\n

\r\n

\r\n

axis.ticks(5, "f");\n

\r\n

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

\r\n

\r\n

\r\n

\n\n

只是为了完整性，相同的代码没有ticks：

\n\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n