Javascript d3地图符号和图例框之间的交互

我有一张地图，上面有基于不同数据值的不同颜色的圆圈。地图带有图例框，每个图例框都有一系列值。我试图找出如何连接这两个-当单击地图圆圈时，我想突出显示相应的图例框。现在，我的单击函数highlightLegend（）如下所示，当我单击一个圆时，它会高亮显示所有框：

circleColorMap.forEach(function(d, i){
        legend.classed("legend-highlight", function(d) {
            var colorVal = circleColorMap[i].value;

        return colorVal >= id.roll_pm25;
        });
    });`

---

这是密码。我知道这与第172行有关，但我不确定如何处理此问题。

完全可以通过匹配颜色来实现：

  //highlight a legend box that corresponds to a clicked map circle 
  function highlightLegend(id) {
    var self = d3.select(this),
        rects = d3.selectAll('.symbols>svg>rect');
    // clear previous selection
    rects.style({'stroke': 'none', 'stroke-width': '1px'});
    // loop and hightlight matches
    rects.each(function(){
      var r = d3.select(this);
      if (r.style('fill') === self.style('fill')){
        r.style({'stroke': 'red', 'stroke-width': '2px'});
      }
    });
  };

---

更新。

这太棒了！非常感谢。