nvd3.js图表​​ajax数据重绘 - 缺少hovereffect +前yAxis规模

Question

我正在使用nvd3绘制一个简单的折线图,其中数据通过ajax请求接收.它与第一个绘图请求完美配合,但不能重绘.图表通过调用相同的绘图函数重绘,但具有不同的数据+不同的最大/最小值.

使用新数据重新绘制图表时,不会出现"悬停圈",而工具提示会出现.此外,当单击图表的图例并强制重绘时,再次出现悬停,但yAxis的值将更改为第一个绘制图表的值.

到目前为止,我假设重绘图表时仍保留旧的最大/最小值 - 但仅涉及"悬停"效果.到目前为止,一般图表在重绘时看起来很好 - 问题只是面向悬停而且就是这样.

听起来很混乱,但希望你能明白这一点.

一些代码:

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

Answer 1

我自己才刚刚开始使用 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()（包括轴重绘和工具提示）。

警告：这似乎偶尔会导致重新计算时计算错误：