当我更新现有 NVD3 图表中的数据时,沿 x 轴的刻度不以固定间隔呈现。
我正在创建一个multiBarChart
数据来源于d3.json()
。数据表示某个日期范围内的点击次数。我有一个单独的日期范围选择器,可以更新图表的数据。
我有以下内容来创建图表(简化):
initGraph = function(url) {
d3.json(url, function(data) {
nv.addGraph(function() {
chart = nv.models.multiBarChart();
d3.select('#chart svg').datum(data).transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
});
};
以及以下函数来更新它,该函数在日期选择器中调用:
redrawGraph = function(url) {
d3.json(url, function(data) {
d3.select('#chart svg').datum(data).transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
});
};
一切看起来都很好,但偶尔刻度间距会不一致:
仅当更新现有图表时才会发生这种情况。
我花了相当多的时间来验证数据是否正确 - x 值按固定值递增 - 所以我只能认为在重新绘制图表时我遗漏了一些东西。
有点晚了,但是你需要打电话chart.update()
而不是注册一个新的窗口监听器,这样代码就变成:
redrawGraph = function(url) {
d3.json(url, function(data) {
d3.select('#chart svg').datum(data).transition().duration(500).call(chart);
chart.update();
});
};
基本上每次在 nvd3 中更新图表时,您都需要调用chart.update
重新绘制它。
注意nv.utils.windowResize(chart.update)
相当于
// Register an event listener on windowResize
nv.utils.windowResize(function() {
// Every time the window is resized, redraw the chart
chart.update();
});
所以每次更新都这样做并不能产生好的效果。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)