d3 - 悬停在图例上突出显示相应的数据 [英] d3 - hover on legend to highlight the respective data
问题描述
使用d3成功创建了一个热图。
Successfully created a heatmap using d3.
这里是 FIDDLE 。
我有一些关于使用d3的 mouseover
事件。但现在我想向前迈进一步。
I have some basic idea on using d3's mouseover
events. But now I wanted move a step ahead.
这是我要找的。当我在一个传说中徘徊时,我希望图表中突出显示悬浮图例的相应数据。
This is what I'm looking for. When I hover on a legend, I wanted the hovered legend's respective data to be highlighted in the chart.
有人可以帮助我实现它吗?
Can someone help me to achieve it?
推荐答案
您没有将数据绑定到图例,这使得这个任务更困难,但你仍然可以很容易地做。这个想法是将由填充颜色定义的类分配给 rect
元素,然后在鼠标悬停处理程序中相应地选择。
You're not binding the data to the legend, which makes this task a bit more difficult, but you can still do it fairly easily. The idea is to assign a class defined by the fill color to the rect
elements and then select accordingly in the mouseover handler. The code looks like this.
// 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");
});
完成示例这里。
这篇关于d3 - 悬停在图例上突出显示相应的数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!