NVD3 - 在轴上配置刻度答案

【问题标题】：NVD3 - configuring ticks on axisNVD3 - 在轴上配置刻度
【发布时间】：2014-02-11 09:04:52
【问题描述】：

我有一个 nvd3 折线图，它显示了一个时间序列，无法正确获取 x 轴上的刻度。

对于更长的时间跨度，它按预期工作。但对于较短的时间跨度（此处：12/31/05 到 01/01/06），多个刻度会显示相同的日期：

请查看code for this chart on JSFiddle

我希望图表只显示数据点的刻度，而不是介于两者之间。用折线图可以吗？据我了解，d3 可以，但我不知道 nvd3 是否公开了此功能。

我尝试使用chart.xAxis.ticks() 明确设置滴答数，但没有成功。唯一有效的是使用chart.xAxis.tickValues([...]) 显式设置刻度值，但我不想自己计算它们。

【问题讨论】：

标签： javascript charts d3.js nvd3.js

【解决方案1】：

一般来说解决这个问题的方法是使用custom multi-scale time formats。请注意，此示例本身不适用于 NVD3，因为它使用的是旧版本的 D3，但下面的示例可以。

您的问题是刻度不是“干净”的时间划分，如果您应用多尺度格式，您会得到类似this 的东西。它总是显示更细粒度的格式，因为其他任何事情都会导致精度损失。

但是，如果小时小于 3，您可以使用简单的启发式方法来显示日期而不是时间，这在您的情况下工作得相当好。有关示例，请参阅here。做到这一点的正确方法是让你的蜱清除分裂。

这让我们想到了您的实际问题。除了为您想要做的事情明确设置.tickValues() 之外别无他法，但您可以很容易地计算数据中的 x 位置：

var xvalues = [],
    tmp = data.map(function(e) { 
            return e.values.map(function(d) { return d[0]; });
          });
xvalues.concat.apply(xvalues, tmp);

代码不是最漂亮的，因为它是一个嵌套结构，但相当简单。使用它，您可以显式设置刻度值，完整示例here。

【讨论】：

抱歉，我一开始有点不切实际。希望这对您有所帮助。