d3 harita sembolü ile bir gösterge kutusu arasındaki etkileşim

Question

Farklı veri değerlerine göre farklı renklerde daireler içeren bir haritam var. Harita, her biri bir dizi değer içeren efsane kutuları ile birlikte gelir. Bu ikisini nasıl bağlayacağımı anlamaya çalışıyorum - bir harita çemberi tıklandığında, ilgili gösterge kutusunu vurgulamak istiyorum. Şu anda, benim tıklama fonksiyonu highlightLegend() şeklinde görünür ve ben bir daire tıkladığınızda tüm kutuları vurgular:

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

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

Here kodudur. Hat 172 ile bir ilgisi olduğunu biliyorum, ama buna nasıl yaklaşacağımı bilmiyorum.

Answer 1

Sen uyumlu renklerde tamamen yapabilirsiniz:

//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 güncellendi.