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时，ticks值为null。因此，在使用默认代码（上面）覆盖之前，只需要nvd3检查以查看ticks是否为null。这使您有机会提供不会被覆盖的备用刻度函数。这是我的编辑版本的样子：

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 ......以及可能还有其他图表。

Answer 2

其他解决方案对我不起作用。另外，我不想修改nvd3的源代码，因为以后对nvd3的更新将破坏我的代码。相反，在nvd3中设置滴答计数的工作是将时间作为整数发送并指定我想要显示的特定值。

就我而言，我需要这样做：

chart.xAxis.tickValues([0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]);

事实证明，设置tickValues会覆盖每个时间点的自动生成：https://github.com/mbostock/d3/wiki/SVG-Axes#tickValues

Answer 3

D3为特定的时间间隔提供了便利功能（参见documentation）。你应该可以简单地做

chart.xAxis.ticks(d3.time.hours, 1)

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

3 个答案: