マップシンボルと凡例ボックスの間のd3の相互作用

Question

私は、異なるデータ値に基づいて異なる色の円を持つ地図を持っています。地図には、それぞれがある範囲の値を持つ凡例ボックスが付属しています。私はこれらの2つをどのように結びつけるかを考えようとしています - マップサークルをクリックすると、対応する凡例のボックスを強調したいと思います。今、私のクリック機能の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

あなたは完全に色を一致させることにより、これを行うことができます：codeを更新しました

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

を。