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

Question

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

但是，y轴的绘制步长较小，例如0、0.5、1、1.5、2等。我想将轴值仅设置为整数，但是使用domain和range根本没有帮助。

我看不到用于设置诸如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>