使用 NVD3.js (nv.models.lineWithFocusChart)，当 x 值为日期时，如何在 X 轴上设置特定刻度？

我在用着nv.models.lineWithFocusChart，我在其中显示了一些每小时的测量值。所以 x 域是日期。

我需要在 X 轴上显示每小时的刻度：

00:00 01:00 02:00 ... 24:00

我已经尝试了我能找到的一切，但没有任何效果。当值不是日期时，似乎很容易设置特定的刻度。但不知道如何进行约会。

这是创建图表的代码（如果有帮助的话）：

 nv.addGraph ->
    chart = nv.models.lineWithFocusChart(view)
    chart.yAxis.tickFormat(d3.format(".02f"))

    d3.select(graphSelector).datum([]).transition().duration(500).call(chart)
    nv.utils.windowResize ->
      d3.select(graphSelector).call(chart)

    chart.xAxis.tickFormat (d) ->
      d3.time.format(ticksFormat)(new Date(d)) 
    chart.x2Axis.tickFormat (d) ->
      d3.time.format(ticksFormat)(new Date(d))

    chart.xAxis.tickSubdivide(9)

好吧，这确实很旧，但我会回答以帮助其他遇到此问题的人。

问题是，在nvd3框架中，无论你将ticks()设置为什么，生成图表时都会自动覆盖它。请参阅 lineWithFocusChart 中的以下代码[nv.d3.js 的开发版本，1.1.15b]:

6526        xAxis
6527            .scale(x)
6528            .ticks( availableWidth / 100 ) // <-- this is the problem
6529            .tickSize(-availableHeight1, 0);

我的解决方案是对 nvd3 进行较小的编辑。创建 xAxis 时，刻度值为 null。因此，只需让 nvd3 检查 ticks 是否为空，然后再用默认代码（上面）覆盖即可。这使您有机会提供不会被覆盖的备用刻度函数。这是我编辑的版本：

6526        xAxis
6527            .scale(x)
6528            .tickSize(-availableHeight1, 0);
6529
6530        if (xAxis.ticks() == null) // <-- ignores default if you already set ticks()
6531            xAxis.ticks( availableWidth / 100 ) 

进行此更改后，您可以使用上面 @Lars Kotthoff 建议的代码将刻度格式设置为时间间隔，例如，

chart.xAxis.ticks(d3.time.hours);

另请注意...如果您还没有...您需要确保在图表上显式设置 xScale 以使用时间刻度：

chart.xScale(d3.time.scale());

这个问题也会发生 stackedAreaChart 和 lineChart...并且可能还有其他图表。