在 d3 地图中选择多个路径元素

Question

我有一张世界地图，其中有不同的国家作为路径元素。每个国家都属于一个集群，该集群是一个包含国家名称的对象。这些名称对应于各个要素的 geojson 属性中的名称。当点击一个国家时，我想改变该国家所属的整个集群的样式。

我可以突出显示单击的节点，因为它是这样传入事件处理程序的：

    svg.selectAll("path").data(json.features).enter().append("path")
    .attr("d", path)
    .style("fill", function(d) {
        var value = d.properties.value;
        var size = d.properties.size;
        if (value) {
            var hsv = hsvToRgb((value / moreThanOne) *0.66, 1, 0.1 + (size / maxSize) * 0.9);
            if (size == 1)  return "#000000";
            else return "rgba(" + Math.floor(hsv[0]) + "," + Math.floor(hsv[1]) + "," + Math.floor(hsv[2]) + ",255)";
        } else return "#999999";
    }).on("click", function(d) {
        var name = d.properties.name;
        var value = d.properties.value;
        hilite(value, this);
    })

这里是高亮功能：

function hilite(cluster, node) { //highlights the single clicked node
d3.select(node).style("stroke", "#ff0000");
//clustermap is the object holding the clusters data
Object.keys(clusterMap[cluster]).forEach(function(key) {
    svg.selectAll("svg").data().each(function(d) {
        if (d.properties.name.toLowerCase() == key.replace(".gif", "").toLowerCase()) {
            //if it matches, style ... but how?
            console.log(d.properties.name.toLowerCase() + " " + key.replace(".gif", "").toLowerCase());
        }
    });
});

}

如何按名称选择所有节点并对其应用样式？我是 d3 的新手，所以我想一定有一个简单的方法可以做到这一点，但我想不通。

谢谢！

Answer 1

您可以使用.filter() 来执行此操作，假设要比较cluster 和d.properties.name：

d3.selectAll("path").filter(function(d) {
  return d.properties.name == cluster;
}).style("stroke", "#f00");