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是固定点表示法的说明符。

这是一个演示（横轴）：

＆＃13;

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)

＆＃13;

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

＆＃13;

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

＆＃13;

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)

＆＃13;

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

＆＃13;

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

1 个答案: