javascript - D3，变量 x 轴基于时间刻度

Question

我正在使用 D3.js 生成响应时间随时间变化的图表。以前我用的是谷歌图表，但它太重了。 D3 很好而且轻巧，但有些事情我无法做到，而我可以使用 Google Charts 做到。

问题是这些图表有时跨越一周，有时跨越一天，有时跨越一小时。对于每种情况，我都必须手动修改 X 轴上刻度的显示方式。我通过比较 X 轴的第一个和最后一个值，并检查它们之间有多少时间来做到这一点，如下所示:

if (dateDif < 25) { // daily
    xAxis = d3.svg.axis()
        .scale(x)
        .tickFormat(d3.time.format('%H:%M'))
        .ticks(d3.time.hours, 3)
        .orient("bottom");
}

else if (dateDif <= 170) {  // ~ weekly
    xAxis = d3.svg.axis()
        .scale(x)
        .tickFormat(d3.time.format('%d/%m %H:%M'))
        .ticks(d3.time.hours, 24)
        .orient("bottom");
} else { // more than weekly
    xAxis = d3.svg.axis()
        .scale(x)
        .tickFormat(d3.time.format('%d/%m %H:%M'))
        .ticks(d3.time.hours, 96)
        .orient("bottom");
}

但这一点都不好，特别是当图表中只有几个值时(它们每分钟生成一次)，然后没有刻度出现(因为它在第一种情况下下降，并且没有足够的值跨越 3 小时)。

你知道有什么插件或方法可以自动调整 X 轴以适应这种情况吗？

Answer 1

d3.svg.axis() 默认情况下非常擅长处理此类行为 - 尝试从轴中删除 .tickFormat(...)，然后设置 .ticks(n) 其中 n 是您希望在任何比例缩放级别的轴上所需的刻度数 - 这可能足以满足您的需求。

这里有几个相关的例子:

http://bl.ocks.org/mbostock/2983699

http://bl.ocks.org/mbostock/1166403