Actualización del elemento Z de SVG con D3
¿Cuál es una forma efectiva de llevar un elemento SVG a la parte superior del orden z, usando la biblioteca D3?
Mi escenario específico es un gráfico circular que resalta (al agregar unstroke
alpath
) Cuando el ratón está sobre una pieza dada. El bloque de código para generar mi gráfico está abajo:
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);
});
He probado algunas opciones, pero hasta ahora no he tenido suerte. Utilizandostyle("z-index")
y llamandoclassed
Ambos no funcionaron.
La clase "top" se define de la siguiente manera en mi CSS:
.top {
fill: red;
z-index: 100;
}
losfill
La declaración está ahí para asegurarse de que sabía que se estaba activando / desactivando correctamente. Es.
He oído usandosort
es una opción, pero no tengo claro cómo se implementaría para llevar el elemento "seleccionado" a la cima.
ACTUALIZAR:
Arreglé mi situación particular con el siguiente código, que agrega un nuevo arco al SVG en elmouseover
evento para mostrar un punto culminante.
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();
});