d3 - schweben auf Legende, um die entsprechenden Daten zu markieren

Question

Erfolgreich erstellt eine Heatmap mit d3.

Hier ist die FIDDLE.

Ich habe eine Grundidee zur Verwendung von d3 mouseover Ereignisse. Aber jetzt wollte ich einen Schritt weiter gehen.

Das ist, was ich suche. Wenn ich eine Legende lege, wollte ich, dass die entsprechenden Daten der schwebenden Legende im Diagramm hervorgehoben werden.

Kann mir jemand helfen, es zu erreichen?

Answer 1

Sie binden die Daten nicht an die Legende, was diese Aufgabe etwas schwieriger macht, aber Sie können es trotzdem relativ einfach tun. Die Idee ist, den rect Elementen eine Klasse zuzuordnen, die durch die Füllfarbe definiert ist, und dann im Mouseover-Handler entsprechend auszuwählen. Der Code sieht so aus.

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

Vollständiges Beispiel here.