保证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>