Javascript 重新加载图表后，nvd3在状态更改时（单击图例时）传递错误事件

我有一个nvd3多条形图（但饼图也会出现同样的问题）

我想在用户启用或禁用一个系列时，通过单击图例中的图例来保存图例的状态。所以我在听状态变化事件

在下面的示例代码中，有两个系列。例如，当用户单击series1以禁用它时，控制台应记录：

New State: {"disabled":[true,false]}

在使用来自服务器的新数据刷新图表后（在下面的代码中由setInterval模拟），问题开始出现。在第一次刷新之后，我总是得到一个错误的事件，即，禁用属性的值被弄乱了

也许我刷新图表的方式是错误的

下面是示例代码：

  var initialData = [
      { key: 'series1', values: [
            { x: 0, y: 10},
            { x: 1, y: 44}
          ]},
      { key: 'series2', values: [
            { x: 0, y: 25},
            { x: 1, y: 11}
          ]}
    ];

  var chart;
  nv.addGraph(function() {

      chart = nv.models.multiBarChart()
        .delay(0);

      d3.select('#chart1 svg')
          .datum(initialData)
          .call(chart);

      nv.utils.windowResize(chart.update);

      chart.dispatch.on('stateChange', function(e) {
        nv.log('New State:', JSON.stringify(e));
      });


      setInterval(function ()
      {
        var newDataFromServer = [
          { key: 'series1', values: [
                { x: 0, y: Math.floor((Math.random()*100)+1)},
                { x: 1, y: Math.floor((Math.random()*100)+1)}
              ]},
          { key: 'series2', values: [
                { x: 0, y: Math.floor((Math.random()*100)+1)},
                { x: 1, y: Math.floor((Math.random()*100)+1)}
              ]}
        ];

        d3.select('#chart1 svg')
          .datum(newDataFromServer)
          .call(chart);

        nv.utils.windowResize(chart.update);

      }, 5000);

      return chart;
  });

---

我找到了一个有效的解决办法。我没有时间进一步调查，但在以下代码（nvd3/legend.js）中：

当其行为异常时（即，在第一次更新之后），d对象不属于此范围内的数据数组（应该属于该范围）。我猜这些数据总是指向初始数据数组

作为更新图表的变通方法，我获取初始数组并将其更新到位：

// Get reference to data array object
var chartDatum = d3.select('#chart1 svg')
                        .datum();
// Clear array and copy new data into it                        
chartDatum.length = 0;
angular.extend(chartDatum, newDataFromServer); // Or jQuery extend, or equivalent
chart.update();

---

我想知道您是否认为这个问题可能与两个数据集具有相同的密钥有关。

// Get reference to data array object
var chartDatum = d3.select('#chart1 svg')
                        .datum();
// Clear array and copy new data into it                        
chartDatum.length = 0;
angular.extend(chartDatum, newDataFromServer); // Or jQuery extend, or equivalent
chart.update();