nvd3.js图表的Ajax数据重绘-缺少悬停效果+以前的y轴刻度

Question

我正在使用nvd3通过ajax请求接收数据并绘制一条简单的折线图。第一次绘图请求时它运行得非常完美，但是重新绘制时就不行了。调用相同的绘图函数，但使用不同的数据和最大/最小值进行重绘。

当使用新数据重新绘制图表时，“悬停圆形”不会出现，但工具提示会出现。此外，当单击图表的图例并强制重新绘制时，悬停又会出现，但y轴的值会更改为第一个绘制图表的值。

到目前为止，我认为在重新绘制图表时，它仍然保留着旧的最大/最小值，但仅涉及“悬停”效果。总体而言，即使在重新绘制时，整个图表看起来还是很好的-问题只是面对悬停效果。

听起来很混乱，但希望你能理解。

下面是一些代码：

 d3.json(queryurl, function(data2){
  nv.addGraph(function(jsonData) {
    if(chart){
       chart.remove();
    }
    chart = nv.models.lineChart()
                .x(function(d) { return d[0] })
                .y(function(d) { return d[1] })
                .color(d3.scale.category10().range());

    chart.xAxis
        .tickFormat(function(d) {
            return d3.time.format('%x')(new Date(d)) 
        });

    chart.yAxis
        .scale()
        .tickFormat(d3.format(''));

    chart.lines.yDomain([maxmin.max,maxmin.min]);

    d3.select('#chart1 #chartsvg')
      .datum(data2)
      .transition().duration(600)
      .call(chart);

    nv.utils.windowResize(chart.update);

});

});
  return chart;}

- helmson

Answer 1

在重新绘制之前，尝试在svg元素上使用.empty()。

- Gerard

Answer 2

我刚刚开始接触NVD3和D3，但我正在做类似的事情。对我有效的方法是将数据更新函数与图表创建函数分开。请注意下面的警告...

以下是创建图表的代码：

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

我不确定这是否是推荐的解决方案，因为我仍处于“尝试破解直到能工作”的阶段。使用此方法，在调用 redrawGraph() 后，图表的所有功能都可以正常运行（包括轴重新绘制和工具提示）。

注意：这似乎偶尔会导致重新计算时计算出错误的刻度线：

- nullPainter

---

查看我的解决刻度问题的方法 - 基本上是重新绘制图表。 - nullPainter