Question

我有以下代码。它在D3中绘制堆叠图形，然后允许用户通过从下拉列表中选择一个选项来过滤显示的行。

但是，我的范围有问题。当我使用下拉列表时，控制台语句显示series 1已正确更新。但是，鼠标移动代码中的series 2尚未更新。

我想这是因为它已经绑定，并且在变量更新时没有更新。如何访问更新的变量？

 d3.csv("/data/test.csv", function(error, data) {

  function updateGraph(label) {

    // Filter the data. 
    var series = data.filter(function(d, i) {
      return d.Type == label;
    });
    console.log('series 1', series); // This updates correctly. 

    // Draw the paths. 
    var items = svg.selectAll("path").data(newSeries);
    items.enter().append('path').attr("d", function(d) {
      return area(d.data);
    }).on("mousemove", function(d, i) {
      console.log('series 2', series); // This is out of date. 
    });
  }

  // Draw the initial graph. 
  updateGraph('initial');
  // When the user changes the drop-down, redraw the graph. 
  d3.select("#chooseoption").on("change", function(val) {
    updateGraph(this.options[this.selectedIndex].value);
  });

});

Answer 1

如果您希望有多个事件处理程序可以访问或修改的单个series变量，那么您需要在所有想要参与的事件处理程序的范围内定义该变量，以便它们共享访问权限在多个闭包中存在相同的变量而不是变量的多个副本。

在这种情况下，您可以这样做：

d3.csv("/data/test.csv", function(error, data) {

  // define series variable where multiple event handlers can share it
  var series;
  function updateGraph(label) {

    // Filter the data. 
    series = data.filter(function(d, i) {
      return d.Type == label;
    });
    console.log('series 1', series); // This updates correctly. 

    // Draw the paths. 
    var items = svg.selectAll("path").data(newSeries);
    items.enter().append('path').attr("d", function(d) {
      return area(d.data);
    }).on("mousemove", function(d, i) {
      console.log('series 2', series); // This is out of date. 
    });
  }

  // Draw the initial graph. 
  updateGraph('initial');
  // When the user changes the drop-down, redraw the graph. 
  d3.select("#chooseoption").on("change", function(val) {
    updateGraph(this.options[this.selectedIndex].value);
  });

});

JavaScript范围：在事件处理程序中访问变量？

1 个答案: