JavaScript（D3筛选）中向匿名函数传递局部变量问题

嘿，这个问题我之前在用D3开发的时候也碰到过，完全不用把county_list改成全局变量就能搞定，核心是处理函数作用域绑定的问题。

问题根源 #

你用普通function作为filter的回调时，D3会给这个回调绑定特定的执行上下文（比如当前的数据项或DOM元素），虽然理论上外层的county_list应该能通过闭包访问，但在部分场景（比如旧版D3的作用域处理逻辑）下，会出现变量无法被识别的情况，从而抛出Uncaught ReferenceError。

解决方案1：使用箭头函数（推荐） #

箭头函数不会创建自己的执行上下文，它会直接继承外层点击事件回调的词法作用域，这样就能毫无障碍地访问county_list：

d3appendedElement.on("click", function(d){
  var county_list = state_retriever[d.id];
  embedGroup.filter((e) => {
    console.log(e);
    return e[0] in county_list;
  });
})

解决方案2：闭包保存变量（兼容旧环境） #

如果你的项目需要兼容不支持箭头函数的旧浏览器，可以通过立即执行函数创建闭包，显式保存county_list的引用，确保回调能稳定访问到它：

d3appendedElement.on("click", function(d){
  var county_list = state_retriever[d.id];
  embedGroup.filter((function(list) {
    return function(e) {
      console.log(e);
      return e[0] in list;
    };
  })(county_list));
})

额外小优化 #

如果想让筛选逻辑的可读性更高，你可以先把county_list的键提取成数组，用includes()方法判断：

d3appendedElement.on("click", function(d){
  var county_list = state_retriever[d.id];
  var countyIds = Object.keys(county_list); // 提取所有 county ID 到数组
  embedGroup.filter((e) => {
    console.log(e);
    return countyIds.includes(e[0]);
  });
})

内容的提问来源于stack exchange，提问作者asuprem