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

时间:2016-03-22 21:09:38

标签: javascript d3.js

我有一张地图,其中包含基于不同数据值的不同颜色的圆圈。地图附带图例框,每个框都有一系列值。我试图弄清楚如何连接这两个 - 当点击地图圈时,我想突出显示相应的图例框。现在,我的点击功能highlightLegend()看起来像这样,当我点击一个圆圈时它突出显示所有框:

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

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

Here是代码。我知道它与第172行有关,但我不知道如何处理这个问题。

1 个答案:

答案 0 :(得分:0)

你可以通过匹配颜色完全做到这一点:

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

更新了code