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

d3 interaction between map symbol and a legend box

本文关键字：之间 交互 地图 符号 d3      更新时间：2023-09-26

我有一个基于不同数据值的带有不同颜色圆圈的地图。该地图带有图例框，每个图例框都有一系列值。我正试图弄清楚如何连接这两者——当点击地图圆圈时，我想突出显示相应的图例框。现在，我的点击函数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'});
      }
    });
  };

已更新代码。

相关文章：