D3.js中点击省份后修改特定面积要素样式的代码疑问

嘿，这个问题很典型，我来帮你捋清楚～

首先直接回答你的问题：代码里的???应该替换为 d3.select(this)。

为什么是这个答案？ #

在D3的.each()回调函数中，this指向当前正在遍历的原生DOM元素（也就是每个代表省份的<path>标签），但原生DOM对象没法直接调用D3的.style()方法。我们需要用d3.select(this)把它包装成D3的选择集，这样就能链式调用样式操作了。

结合你的需求调整完整代码 #

另外注意：你当前的代码是页面加载时就遍历所有省份执行隐藏逻辑，但你的需求是点击某一省份时才触发这个操作，所以需要把逻辑放到点击事件的回调里，完整代码示例如下：

// 先给所有省份路径绑定点击事件
var polys = mapLayer.selectAll("path")
  .on("click", function(event, d) {
    // 点击某省份后，遍历所有省份路径处理样式
    mapLayer.selectAll("path")
      .each(function(e) {
        if (e.properties.AREA < 10000000) {
          // 隐藏面积小于阈值的省份
          d3.select(this).style("visibility", "hidden");
          // 如果是要修改颜色，换成下面这行：
          // d3.select(this).style("fill", "#cccccc");
        } else {
          // 可选：恢复面积达标省份的可见性（比如避免之前操作的影响）
          d3.select(this).style("visibility", "visible");
        }
      });
  });

额外说明 #

如果你的D3版本是v5及更早，点击事件的回调参数顺序是(d, i)而不是(event, d)，记得对应调整参数位置哦。

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