nvd3在重新加载图表后的stateChange(单击图例时）上传递错误事件

nvd3 passing wrong event on stateChange (when clicking legend) after chart is reloaded

本文关键字：单击 事件 错误 stateChange 新加载 加载 nvd3      更新时间：2023-09-26

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

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

在下面的示例代码中，有两个系列。当用户点击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/lodge.js）：

  .on('click', function(d,i) {
    dispatch.legendClick(d,i);
    if (updateState) {
       if (radioButtonMode) {
            // etc ...
       }
       else {
            // Note: this 'd' doesn't belong to the 'data' array in the current scope
           d.disabled = !d.disabled;
           // etc ...
       }
       dispatch.stateChange({
          // The old data is notified as event
          disabled: data.map(function(d) { return !!d.disabled })
       });
    }
  })

当它行为不端时（即，在第一次更新之后），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();
相关文章：