X轴日期与nvd3中的y轴数据不对齐
X轴日期与nvd3中的y轴数据不对齐
提问于 2013-10-30 09:58:50
我使用的NVD3与瓶和我有日期在x轴上.
如你所见，x轴上的线与点不重合。我在x轴上打印日、月、年和小时.我不明白为什么日期不相等，即‘小时’是不一样的，即使我的x轴数据是，所以线是超过"24小时“的间隔。我认为这是造成问题的原因。
(编辑)我的代码是：
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;
});回答 2
Stack Overflow用户
回答已采纳
发布于 2014-03-08 01:26:26
这里有一个更好的建议，因为如果没有将x轴声明为时间刻度，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 graphStack Overflow用户
发布于 2013-10-31 16:47:43
好了，明白了！我所做的就是创建一个排序的时间戳列表，这些时间戳将用作x轴上的数据，并将其包围到最近的一天。然后，我强制NVD3使用这些数据作为间隔，而不是自动生成的间隔，方法是：
chart.xAxis
.tickValues({{x_data}})其中x_data是列表。瞧！.
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19690432
复制相关文章
相似问题
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
