我有一张地图,其中包含基于不同数据值的不同颜色的圆圈。地图附带图例框,每个框都有一系列值。我试图弄清楚如何连接这两个 - 当点击地图圈时,我想突出显示相应的图例框。现在,我的点击功能highlightLegend()看起来像这样,当我点击一个圆圈时它突出显示所有框:
circleColorMap.forEach(function(d, i){
legend.classed("legend-highlight", function(d) {
var colorVal = circleColorMap[i].value;
return colorVal >= id.roll_pm25;
});
});`
Here是代码。我知道它与第172行有关,但我不知道如何处理这个问题。
答案 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。