d3 - 懸停在圖例上以突出顯示相應數據

Question

使用d3成功創建了熱圖。

這是FIDDLE。

我對使用d3的mouseover事件有一些基本的想法。但現在我想先行一步。

這就是我要找的。當我將鼠標懸停在圖例上時，我希望懸停圖例的相應數據在圖表中突出顯示。

有人可以幫助我實現它嗎？

Answer 1

你並沒有將數據綁定到圖例，這使得這項任務變得更加困難，但是你仍然可以很容易地做到這一點。我們的想法是將填充顏色定義的類指定給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"); 
}); 

完整示例here。