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

Question

我正在使用 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)

Answer 1

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

问题是在nvd3框架中，不管你把ticks()设置成什么，生成图表时都会自动覆盖掉。请参阅 lineWithFocusChart [dev version of 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 时，刻度值为空。因此，只需让 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...以及其他图表中。