根据 d3.js 中的 JSON 属性选择特定的 svg 路径

Question

是否可以仅使用 D3 从 geoJSON 文件创建的 SVG 路径之一 select？ 在我的情况下，路径是 map 中的区域。 用户可以从下拉列表中选择一个区域。 我想将此列表中的选定值用于 select 具有匹配属性的路径并对其进行不同的着色。 区域名称是 geoJSON 文件中的属性之一。

我可以通过添加某种过滤器来进一步限定d3.select("path")吗？

这就是代码的样子......

d3.json(polygonFile, function(json) {
            for (var g = 0; g < json.features.length; g++) {
              if(json.features[g].properties.NAME == selectedAreaName) {
                d3.select("path") //THIS IS WHERE I NEED TO ADD THE FILTER ...
                    .transition()
                    .duration(600)
                    .style("filter", "brightness(0.7)")
              }
            }
          }); 

Answer 1

有两种方法可以解决您的问题：

您可以使用d3.selectAll并根据其数据/特定属性过滤路径。

d3.selectAll("path").filter((d) => d.uniqueId === 12345)

您甚至可以使用选择器代替 function：

d3.selectAll("path").filter(".className")

如果有很多路径您不想使用过滤器，因为它会在返回正确路径之前遍历所有路径，因此您可以设置 id 属性并使用d3.select('#yourpathid')

希望能帮助到你！

Answer 2

我建议以更 D3 风格的方式完成这一切，而不是遍历json.features 。 json.features是data ，所以让我们使用 D3 的数据绑定方法。

// this would get set elsewhere
// be sure to call update() any time this chages!
let selectedAreaName = "area51";

let myData; // storing this someplace accessible from outside the d3.json callback
d3.json(polygotFile, json => {
    myData = json;
    update();
});

function update() {
    // create initial features selection based on data
    let features = d3.select("svg").selectAll("path").data(myData.features);

    // add new features to the selection using the enter selection,
    // and merge back into the original update selection
    features = features.enter().append("path")
        .attr("d", d3.geoPath())
        .merge(features);

    // this is what you're trying to do:
    // every time update() runs, it’ll apply a class
    // to paths whose name == selectedAreaName
    features.classed("selected", d => d.properties.NAME == selectedAreaName);
}