2

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

3 回答 3

4

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

问题是在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 时，刻度值为空。因此，只需在使用默认代码（上图）覆盖之前让 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...可能还有其他图表。

于 2014-10-21T17:46:29.693 回答
1

其他解决方案对我不起作用。另外，我不想修改 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

于 2016-03-14T16:44:33.267 回答
0

D3 为执行特定时间间隔提供了便利功能（请参阅文档）。你应该能够简单地做

chart.xAxis.ticks(d3.time.hours, 1)
于 2013-07-03T11:03:16.977 回答