使用NVD3.js（nv.models.lineWithFocusChart），当x值是日期时，如何在X轴上设置特定的滴答？ [英] With NVD3.js (nv.models.lineWithFocusChart), how do you set specific ticks on X-axis, when x values are dates?

问题描述

我正在使用 nv.models.lineWithFocusChart ，其中显示了每小时的测量数据。所以x域是日期。

I'm using nv.models.lineWithFocusChart, where I'm showing some hourly measurements. So the x domain is dates.

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

What I need is to show a tick per hour on X axis:

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

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

我尝试了所有我找不到的东西，但没有任何效果。看来，当值不是日期时，它容易设置特定的滴答。

I've tried everything I could find but nothing works. It seems that its easy to set specific ticks when values are not dates. But can't figure out how to do it for dates.

下面是创建图形的代码，如果它可以帮助：

Here's the code that creates the graph, if it can help:

 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)

推荐答案

好吧，这真的很老，但我会回答帮助有任何人有这个问题。

Ok, this is really old, but I will answer to help out anyone else who is having this issue.

问题是，在nvd3框架中，无论你设置ticks（）是什么，它都会在生成图表时自动覆盖。请参阅lineWithFocusChart中的以下代码 [dev版本的nv.d3.js，1.1 .15b] ：

The problem is that in the nvd3 framework, no matter what you set the ticks() to, it will be automatically overwritten when the chart is generated. See the following code within 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。这让你有机会提供一个替代的ticks函数，不会被覆盖。这是我编辑的版本看起来像：

My solution was to make a minor edit to nvd3. When the xAxis is created, the ticks value is null. So simply have nvd3 check to see if ticks is null before overwriting with the default code (above). That gives you the chance to provide an alternate ticks function which will not be overwritten. Here's what mine edited version looked like:

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建议的代码将ticks格式设置为时间间隔，例如

After making this change, you can use the code suggested by @Lars Kotthoff above to set the ticks format to a time interval, e.g.,

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

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

One other note...if you haven't already...you need to make sure that you explicitly set the xScale on the chart to use the time scale:

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

此问题也会发生在stackedAreaChart和lineChart ...以及其他图表中。

This problem also occurs stackedAreaChart and lineChart...and probably other charts as well.

这篇关于使用NVD3.js（nv.models.lineWithFocusChart），当x值是日期时，如何在X轴上设置特定的滴答？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！