NVD3 - 在轴上配置刻度

Question

我有一个nvd3折线图，显示时间序列，无法在x轴上获得刻度。

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

请查看code for this chart on JSFiddle

我希望图表只显示数据点的刻度，而不是两者之间。用折线图可以吗？根据我的理解，有可能使用d3，但我无法弄清楚这个功能是否由nvd3公开。

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

Answer 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。