D3.js NVD3-更新数据时不均匀的滴答声

当我更新现有NVD3图表中的数据时，沿x轴的刻度不会以固定的间隔呈现

我正在创建一个

multiBarChart

，数据来自

d3.json（）

。数据表示某个日期范围内的点击次数。我有一个单独的日期范围选择器，用于更新图表的数据

我有以下内容来创建图表（简化）：

以及以下更新函数，该函数在日期选择器中调用：

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 svg").empty();

---

结果在美学上并不像人们预期的那样糟糕。

有点晚了，但您需要调用

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();
});

---

因此，在每次更新中这样做不可能有好的效果。

我使用的输入样本数据如下：

[{“key”：“newzeland”，“values”：[{“y”：1，“x”：1354665600000}，{“y”：2，“x”：135475200000}，{“y”：3，“x”：1354838400000}，{“y”：0，“x”：135492480000}，{“y”：0，“x”：1355011200000}，{“y”：0，“x”：1355097600000}，{“y”：0，“x”：1355097600000，{“y”：1355184000000}，
// Register an event listener on windowResize
nv.utils.windowResize(function() {
  // Every time the window is resized, redraw the chart
  chart.update();
});