Javascript 基于d3.js中的JSON属性选择特定的svg路径

是否可以仅选择使用D3从geoJSON文件创建的SVG路径之一？在我的例子中，路径是地图中的区域。用户可以从下拉列表中选择一个区域。我想使用此列表中的选定值来选择具有匹配属性的路径，并以不同的方式为其着色。该区域的名称是geoJSON文件中的属性之一

我可以通过添加某种过滤器进一步限定d3.selectpath吗

这就是代码的样子

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

---

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

您可以使用d3.selectAll并根据路径的数据/特定属性筛选路径

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

您甚至可以使用选择器而不是函数：

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

如果有很多路径您不想使用筛选器，因为它将在返回正确路径之前遍历所有路径，因此您可以设置id属性并使用d3。选择“yourpathid”

---

希望有帮助

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

您可以使用d3.selectAll并根据路径的数据/特定属性筛选路径

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

您甚至可以使用选择器而不是函数：

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

如果有很多路径您不想使用筛选器，因为它将在返回正确路径之前遍历所有路径，因此您可以设置id属性并使用d3。选择“yourpathid”

---

希望有帮助

我建议用一种更像D3的方式来完成这一切，而不是通过json.features进行迭代。features是数据，所以让我们使用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);
}

---

我建议用一种更像D3的方式来做这件事，而不是遍历json.features。features是数据，所以让我们使用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);
}

---

你的方法帮了我很大的忙，让我的脚本正常工作。谢谢@Noleli。你的方法帮了我很大的忙，让我的脚本正常工作。谢谢@Noleli。您选择的第一个答案是正确的@DNase，而您选择的第一个答案是正确的@DNase