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

使用d3成功创建了热图

这是我的建议

我对使用d3的

mouseover

事件有一些基本想法。但现在我想领先一步

这就是我要找的。当我将鼠标悬停在图例上时，我希望在图表中突出显示悬停图例的各个数据

---

有人能帮我完成吗？

您没有将数据绑定到图例，这使得此任务有点困难，但您仍然可以相当轻松地完成。其思想是将填充颜色定义的类分配给

rect

元素，然后在mouseover处理程序中进行相应的选择。代码如下所示

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

---

完整的示例。

非常感谢您。至少现在我对它的工作原理有了一个清晰的了解。@charantej你应该发布一个关于这个问题的单独问题，并用一个完整的例子来演示这个问题。