d3 - 将鼠标悬停在图例上以突出显示相应的数据

Question

使用d3成功创建了热图.

这是FIDDLE.

我对使用d3的mouseover事件有一些基本的想法.但现在我想向前迈进一步.

这就是我要找的东西.当我将鼠标悬停在图例上时,我希望悬停的图例各自的数据在图表中突出显示.

有人可以帮我实现吗？

Answer 1

您没有将数据绑定到图例,这使得此任务更加困难,但您仍然可以相当容易地完成此任务.我们的想法是将填充颜色定义的类分配给rect元素,然后在鼠标悬停处理程序中进行相应的选择.代码看起来像这样.

// for the rectangles
.attr("class", function(d) {  
  return "hour bordered " + "color-" + colorScale(d.value).substring(1);
})

// for the legend
.on("mouseover", function(d, i) {
  svg.selectAll("rect.color-" + colors[i].substring(1)).style("stroke", "blue");
})
.on("mouseout", function(d, i) {
  svg.selectAll("rect.color-" + colors[i].substring(1)).style("stroke", "white");
});

在这里完成示例.