d3地圖符號與圖例框之間的交互

Question

我使用基於不同數據值的不同顏色的圓形地圖。該地圖帶有圖例框，每個圖框都有一系列值。我想弄清楚如何連接這兩個地圖 - 點擊地圖圈時，我想突出顯示相應的圖例框。現在，我的點擊功能highlightLegend（）看起來是這樣的，當我點擊了一圈它強調所有箱子：

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

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

Here是代碼。我知道它與第172行有關，但我不知道如何解決這個問題。

Answer 1

你可以通過匹配顏色的嗎？這完全：

//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。