Aktualisieren des SVG-Element-Z-Index mit D3
Was ist eine effektive Methode, um ein SVG-Element mithilfe der D3-Bibliothek an die Spitze der Z-Reihenfolge zu bringen?
Mein spezielles Szenario ist ein Tortendiagramm, das hervorhebt (durch Hinzufügen von astroke
zumpath
), wenn sich die Maus über einem bestimmten Stück befindet. Der Codeblock zum Generieren meines Diagramms ist unten:
svg.selectAll("path")
.data(d)
.enter().append("path")
.attr("d", arc)
.attr("class", "arc")
.attr("fill", function(d) { return color(d.name); })
.attr("stroke", "#fff")
.attr("stroke-width", 0)
.on("mouseover", function(d) {
d3.select(this)
.attr("stroke-width", 2)
.classed("top", true);
//.style("z-index", 1);
})
.on("mouseout", function(d) {
d3.select(this)
.attr("stroke-width", 0)
.classed("top", false);
//.style("z-index", -1);
});
Ich habe ein paar Optionen ausprobiert, aber bisher kein Glück. Verwendenstyle("z-index")
und anrufenclassed
beides hat nicht funktioniert.
Die "Top" -Klasse ist in meinem CSS wie folgt definiert:
.top {
fill: red;
z-index: 100;
}
Dasfill
Die Anweisung soll sicherstellen, dass ich weiß, dass sie richtig ein- und ausgeschaltet wurde. Es ist.
Ich habe mit gehörtsort
ist eine Option, aber ich bin nicht sicher, wie es implementiert werden würde, um das "ausgewählte" Element nach oben zu bringen.
AKTUALISIEREN:
Ich habe meine spezielle Situation mit dem folgenden Code behoben, der dem SVG auf der Seite einen neuen Bogen hinzufügtmouseover
Veranstaltung, um ein Highlight zu zeigen.
svg.selectAll("path")
.data(d)
.enter().append("path")
.attr("d", arc)
.attr("class", "arc")
.style("fill", function(d) { return color(d.name); })
.style("stroke", "#fff")
.style("stroke-width", 0)
.on("mouseover", function(d) {
svg.append("path")
.attr("d", d3.select(this).attr("d"))
.attr("id", "arcSelection")
.style("fill", "none")
.style("stroke", "#fff")
.style("stroke-width", 2);
})
.on("mouseout", function(d) {
d3.select("#arcSelection").remove();
});