0

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

但是，我遇到了范围问题。当我使用下拉菜单时，控制台语句显示series 1已正确更新。但是series 2，mousemove 代码里面，并没有更新。

我猜那是因为它是绑定的并且在变量更新时没有更新。如何访问更新的变量？

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

});
4

1 回答 1

2

如果您希望有多个事件处理程序可以访问或修改的单个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);
  });

});
于 2013-09-13T17:21:38.437 回答