I am using NVD3 with Flask and I have dates on the x-axis.
我使用的是Flask的NVD3，在x轴上有日期。
As you can see the lines on x-axis don't coincide with the points. I printing out the day, month, year and hours on the x-axis. I don't understand why the dates are not equally spaced i.e the 'hours' are not the same even though my x-axis data is, so that the lines are more than "24 hrs" apart. I think this is causing the problem.
你可以看到x轴上的线与点不一致。我在x轴上打印日、月、年和小时。我不明白为什么日期不是等距的。即使我的x轴数据是这样的，“小时”也不一样，所以这条线比“24小时”要大。我认为这是造成问题的原因。
(Edited) My code is:
(编辑)我的代码是:
nv.addGraph(function() {
var chart = nv.models.lineChart();
chart.xAxis
.tickFormat(function(d) { return d3.time.format('%d %b %Y')(new Date(parseInt(d))) }
);
chart.yAxis
.tickFormat(d3.format(',.02f'));
chart.tooltipContent(function(key, y, e, graph) {
var x = d3.time.format('%d %b %Y')(new Date(parseInt(graph.point.x)));
var y = String(graph.point.y);
var y = String(graph.point.y);
tooltip_str = '<center><b>'+key+'</b></center>' + y + ' on ' + x;
return tooltip_str;
});
chart.showLegend(true);
d3.select('#lineChart svg')
.datum(data_lineChart)
.transition().duration(500)
.attr('width', 1200)
.attr('height', 450)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
3 个解决方案
#1
10
A better suggestion here as d3 does not scale the x-axis represented by dates well if it is not declared a timescale.
这里有一个更好的建议，即d3不按日期扩展x轴，如果它没有被声明为时间刻度。
chart.xAxis
.tickFormat(function(d) {
return d3.time.format('%d-%m-%y')(new Date(d))
});
chart.xScale(d3.time.scale()); //fixes misalignment of timescale with line graph
#2
4
Ok, got it! What I do is I create a sorted list of timestamps which are to be used as data on the x-axis and round them to the nearest day. Then I force NVD3 to use this data as intervals instead of the auto-generated intervals by doing:
好的,明白了!我所做的是创建一个已排序的时间戳列表，这些时间戳将被用作x轴上的数据，并将它们四舍五入到最近的一天。然后，我强制NVD3以间隔代替自动生成的间隔来使用这些数据:
chart.xAxis
.tickValues({{x_data}})
where x_data is the list. And voila ! ...
其中x_data为列表。瞧!…
#3
0
You can explicitly control how the ticks are generated. To have ticks 24 hours apart, the code would be something like
您可以显式地控制如何生成节拍。如果要间隔24小时，代码应该是类似的。
chart.xAxis.ticks(d3.time.day, 1);
Edit
编辑
It looks like NVD3 doesn't actually use the D3 axis component to generate the labels, hence all of this has no effect. You would have to modify the source of NVD3 to achieve what you want.
看起来NVD3实际上并没有使用D3轴组件来生成标签，因此所有这些都没有效果。您必须修改NVD3的源代码以实现您想要的。
#1
10
A better suggestion here as d3 does not scale the x-axis represented by dates well if it is not declared a timescale.
这里有一个更好的建议，即d3不按日期扩展x轴，如果它没有被声明为时间刻度。
chart.xAxis
.tickFormat(function(d) {
return d3.time.format('%d-%m-%y')(new Date(d))
});
chart.xScale(d3.time.scale()); //fixes misalignment of timescale with line graph
#2
4
Ok, got it! What I do is I create a sorted list of timestamps which are to be used as data on the x-axis and round them to the nearest day. Then I force NVD3 to use this data as intervals instead of the auto-generated intervals by doing:
好的,明白了!我所做的是创建一个已排序的时间戳列表，这些时间戳将被用作x轴上的数据，并将它们四舍五入到最近的一天。然后，我强制NVD3以间隔代替自动生成的间隔来使用这些数据:
chart.xAxis
.tickValues({{x_data}})
where x_data is the list. And voila ! ...
其中x_data为列表。瞧!…
#3
0
You can explicitly control how the ticks are generated. To have ticks 24 hours apart, the code would be something like
您可以显式地控制如何生成节拍。如果要间隔24小时，代码应该是类似的。
chart.xAxis.ticks(d3.time.day, 1);
Edit
编辑
It looks like NVD3 doesn't actually use the D3 axis component to generate the labels, hence all of this has no effect. You would have to modify the source of NVD3 to achieve what you want.
看起来NVD3实际上并没有使用D3轴组件来生成标签，因此所有这些都没有效果。您必须修改NVD3的源代码以实现您想要的。