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

Question

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

4

我有一个条形图，值的范围可以从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");

- sveti petar

这可能会有所帮助：https://dev59.com/9Gcs5IYBdhLWcg3wtmED#12643747 - Xavier Guihot

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gerardo Furtado · Accepted Answer

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

然而，在你的情况下，解决方案很简单：你可以使用带有整数格式化程序的d3.range(6)和tickValues，甚至更简单的是，你可以使用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>

为了完整起见，相同的代码但不带有反引号：

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>