javascript - 根据数据范围动态设置 D3 刻度

Question

有没有办法根据当前数据集在 D3 轴上动态设置 ticks。我遇到的问题是我的时间范围(x 轴)可能变化很大。对于一些数据集来说，它是几年的值(value)，对于其他数据集来说是几个月，在某些情况下只是几毫秒。我目前有这套 ticks:

.ticks(d3.time.month, 3)

...每三个月显示一次。对于跨越数月或数年的数据，这是一个很好的季度轴。但是，如果数据范围仅超过几周、几天甚至几秒，我的轴标签上不会显示任何内容。

Answer 1

根据我(相当丰富的)经验，没有自动神奇的方法可以做到这一点。但是“硬”方式非常有效，您可以在其中明确指定您希望在任何时间范围内发生什么。

基本上，您知道图表的完整时间跨度 — 假设它称为 timeSpan，以毫秒为单位 — 因此您可以制作一个大的 if...else block 来响应它.例如

var interval, count;
if (timeSpan <= 3600000) { // 1 hour or less
  interval = d3.time.minute;
  count = 15; // every 15 minutes
}
else if (timeSpan <= 8.64e7) { // 24 hours {
  interval = d3.time.hour;
  count = 1;
}
else if (timeSpan <= 7 * 8.64e7) { // 7 days {
  interval = d3.time.day;
  count = 1;
}
// etc....

timeAxis.ticks(interval, count);

在许多情况下，这对我来说效果很好。您可以根据需要通过添加更多条件来扩展它。此外，也许您的图表有两个轴 - 一个用于主要的标记刻度线，另一个用于次要刻度线或网格线。然后您可以引入另一个变量 secondaryInterval 并以相同的方式将其添加到 if...else block 中。同样，您可能会发现您还需要为每个 timeSpan 指定不同的 .tickFormat()，这也可以用于此代码。

var interval, count, format;
if (timeSpan <= 3600000) { // 1 hour or less
  interval = d3.time.minute;
  count = 15; // every 15 minutes
  format = d3.time.format("%H:%M");
}
// etc....
timeAxis
  .ticks(interval, count)
  .tickFormat(format);

此外，如果您的图表是响应式的，这意味着有时它的宽度为 900 像素，而有时它的宽度为 200 像素，您可能还需要根据密度调整刻度。在这种情况下，您需要计算密度值，如“每像素毫秒数”:

msPerPixel = timeSpan / chartWidth

对于任何给定的 timeSpan，msPerPixel 会根据浏览器(或图表)的宽度变小或变大，您可以使用 msPerPixel根据大于某个常量的 msPerPixel 改进上面的条件逻辑以显示更多或更少的刻度。

希望对您有所帮助。祝你好运。