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

Question

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

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

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

Answer 2

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

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

结果并不像人们期望的那样美观。