CODEWITHSUNDEEP
javascriptd3.js
Solipsy
Solipsy

Reputation: 312

Selecting multiple path elements in a d3 map

I have a world map with separate countries as path elements. Each country belongs to a cluster, which is an object containing country names. The names correspond to those in geojson properties of individual features. When clicking on a country, I'd like to change style of entire cluster that the country belongs to.

I can highlight the clicked node, since it's passed in event handler like this:

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

here is the highlight function:

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

}

How do I select all the nodes by names and apply styling to them? I'm new to d3, so I guess there must be a simple way to do this, but I cant' figure it out.

Thanks!

Upvotes: 2

Views: 1807

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109242

You can use .filter() to do this, assuming that cluster and d.properties.name are to be compared:

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

Upvotes: 1

Related Questions