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。