Aktualizacja SVG Element Z-Index za pomocą D3
Jaki jest skuteczny sposób na przeniesienie elementu SVG na szczyt kolejności Z, przy użyciu biblioteki D3?
Mój konkretny scenariusz to wykres kołowy, który podkreśla (dodającstroke
dopath
) gdy mysz jest nad danym kawałkiem. Blok kodu do generowania mojego wykresu znajduje się poniżej:
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);
});
Wypróbowałem kilka opcji, ale do tej pory nie miałem szczęścia. Za pomocąstyle("z-index")
i wołanieclassed
oba nie działały.
Klasa „top” jest zdefiniowana w moim CSS w następujący sposób:
.top {
fill: red;
z-index: 100;
}
Thefill
oświadczenie ma na celu upewnienie się, że wiem, że włącza się / wyłącza poprawnie. To jest.
Słyszałem za pomocąsort
jest opcją, ale nie jestem pewien, w jaki sposób zostałaby zaimplementowana, aby doprowadzić „wybrany” element do góry.
AKTUALIZACJA:
Naprawiłem moją szczególną sytuację za pomocą następującego kodu, który dodaje nowy łuk do SVG namouseover
wydarzenie, aby pokazać wyróżnienie.
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();
});