javascript - 保证D3中的刻度数

Question

我有一个包含这种数据的 X 轴:

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]

序号。我想要一个带有 X 刻度的底轴，但希望始终包括第一个和最后一个项目——在本例中是:1 和 15分别。

d3.ticks 的问题是它有时不会返回最后一个报价。而且我不能使用 nice: true，因为所有刻度都应该是数据集中存在的数字。

想法？

编辑:考虑到第一个和最后一个刻度应该始终存在，目标是在刻度之间找到均匀的空间。

Answer 1

在您的特定情况下，您可以使用 d3.range 生成刻度，然后将其传递给轴的 tickValues 方法。例如:

const scale = d3.scaleLinear([0, 15], [0, 1]);
const numberOfTicks = 7;
const tickStep = (scale.domain()[1] - scale.domain()[0]) / (numberOfTicks - 1);
const myTicks = d3.range(scale.domain()[0], scale.domain()[1] + tickStep, tickStep);

console.log(myTicks)

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

但是，由于浮点精度问题，您的数组可能会有意外的长度，具体取决于域/刻度数的组合。例如，使用 [8,15] 作为域和 7 个刻度:

const scale = d3.scaleLinear([8, 15], [0, 1]);
const numberOfTicks = 7;
const tickStep = (scale.domain()[1] - scale.domain()[0]) / (numberOfTicks - 1);
const myTicks = d3.range(scale.domain()[0], scale.domain()[1] + tickStep, tickStep);

console.log(myTicks)

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

如您所见，数组中有 8 个元素，而不是 7 个。

为了处理这些情况，您只需将报价数量传递给 d3.range 并使用 map 处理数学:

const scale = d3.scaleLinear().domain([8, 15]);
const numberOfTicks = 7;
const tickStep = (scale.domain()[1] - scale.domain()[0]) / (numberOfTicks - 1);
const myTicks = d3.range(numberOfTicks)
  .map(d => scale.domain()[0] + d * tickStep);

console.log(myTicks);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

整数

前面的示例生成均匀分布 的刻度。但是，我想你想要整数作为值。在这种情况下，请注意这样一个事实，即对于域和刻度数的所有可能组合，您不能同时具有整数和均匀间隔的刻度。

要获得整数，只需将值四舍五入:

const scale = d3.scaleLinear([0, 15], [0, 1]);
const numberOfTicks = 7;
const tickStep = (scale.domain()[1] - scale.domain()[0]) / (numberOfTicks - 1);
const myTicks = d3.range(scale.domain()[0], scale.domain()[1] + tickStep, tickStep)
  .map(d => Math.round(d))

console.log(myTicks)

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

这里采用与第三个代码片段相同的方法，在 map 中进行所有数学运算，并以 [8,15] 为例:

const scale = d3.scaleLinear().domain([8, 15]);
const numberOfTicks = 7;
const tickStep = (scale.domain()[1] - scale.domain()[0]) / (numberOfTicks - 1);
const myTicks = d3.range(numberOfTicks)
  .map(d => Math.round(scale.domain()[0] + d * tickStep));

console.log(myTicks);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>