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。