Выбор нескольких элементов пути в карте 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");