NVD3 - 更新数据时不均匀的滴答声答案

【问题标题】：NVD3 - uneven ticks when updating dataNVD3 - 更新数据时不均匀的滴答声
【发布时间】：2013-01-27 01:53:02
【问题描述】：

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

我正在使用来自d3.json() 的数据创建一个multiBarChart。数据代表一个日期范围内的命中。我有一个单独的日期范围选择器来更新图表的数据。

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

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 值以固定值递增——所以我只能认为我在重绘图表时遗漏了一些东西。

【问题讨论】：

我用作输入的示例数据在这里：[{"key":"New Zealand","values":[{"y":1,"x":1354665600000},{"y":2,"x":1354752000000},{"y":3,"x":1354838400000},{"y":0,"x":1354924800000},{"y":0,"x":1355011200000},{"y":0,"x":1355097600000},{"y":0,"x":1355184000000}, ... ]}]

标签： d3.js nvd3.js

【解决方案1】：

有点晚了，不过需要调用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();
});

所以每次更新都这样做不会有好的效果。

【讨论】：

【解决方案2】：

我已经通过在选择日期范围时笨拙地重新创建图表来解决这个问题：

$("#chart svg").empty();

结果并不像人们想象的那么糟糕。

【讨论】：