Atualizando o elemento Z do índice SVG com D3
O que é uma maneira eficaz de trazer um elemento SVG ao topo da ordem z, usando a biblioteca D3?
Meu cenário específico é um gráfico de pizza que destaca (adicionando umstroke
aopath
) quando o mouse está sobre uma determinada peça. O bloco de código para gerar meu gráfico está abaixo:
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);
});
Eu tentei algumas opções, mas sem sorte até agora. Usandostyle("z-index")
e chamandoclassed
ambos não funcionaram.
A classe "top" é definida da seguinte forma no meu CSS:
.top {
fill: red;
z-index: 100;
}
ofill
declaração está lá para se certificar de que eu sabia que estava ligando / desligando corretamente. Isto é.
Eu ouvi usandosort
é uma opção, mas não estou claro como isso seria implementado para trazer o elemento "selecionado" para o topo.
ATUALIZAR:
Eu fixei minha situação particular com o seguinte código, que adiciona um novo arco ao SVG nomouseover
evento para mostrar um destaque.
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();
});