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

在d3映射中选择多个路径元素

1 个答案: