nvd3.js 图表 ajax 数据重绘 - 缺少悬停效果 + 前 yAxis 比例

Posted 2023-05-08

【中文标题】nvd3.js 图表 ajax 数据重绘 - 缺少悬停效果 + 前 yAxis 比例

【英文标题】：nvd3.js chart ajax data redraw - missing hovereffect + former yAxis scale

【发布时间】：2012-11-09 04:57:31

【问题描述】：

我正在使用 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;

【参考方案1】：

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

【参考方案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() 后，图表的所有功能都可以工作（包括轴重绘和工具提示）。

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

【讨论】：

见我的workaround for the tick issue - 本质上是重新绘制图表。