使用D3库将SVG元素置于z顺序顶部的有效方法是什么？
我的特定情况是一个饼图其中突出(通过添加stroke到path)当鼠标在给定的片.生成我的图表的代码块如下:
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);
});
我尝试过几个选项,但到目前为止还没有运气.使用style("z-index")和调用classed两者都不起作用.
"top"类在我的CSS中定义如下:
.top {
fill: red;
z-index: 100;
}
该fill声明是有,以确保我知道这是正确的开启/关闭.它是.
我听说使用sort是一个选项,但我不清楚如何将"选定"元素置于顶部.
更新:
我使用以下代码修复了我的特殊情况,该代码在mouseover事件上向SVG添加了一个新弧以显示突出显示.
svg.selectAll("path")
.data(d)
.enter().append("path")
.attr("d", arc)
.attr("class", "arc")
.style("fill", function(d) { return color(d.name); …我创建了以下文档:
<g>
<path class=?"line" name=?"gene_1" stroke=?"#aec7e8" d=?"M10.47...">?</path>?
<path class=?"line" name=?"gene_2" stroke=?"#aec7e8" d=?"M10.47...">?</path>?
<path class=?"line" name=?"gene_3" stroke=?"#aec7e8" d=?"M10.47...">?</path>?
...
</g>
当我将鼠标悬停在每条路径上时,我想将它最后添加到svg:g中,以便它显示在其他行的顶部,但我不知道如何正确选择parentNode:
function onmouseover(d, i){
var current_gene_name = d3.select(this).attr("name"),
current_gene_pcp = d3.select(".line[name=" + current_gene_name + "]");
p1 = this.parentNode
p2 = current_gene_pcp[0].parentNode
p3 = current_gene_pcp[0][0].parentNode
//p.appendChild(this);
}
p1有效,但我想确保"this"是.line,所以我更喜欢使用current_gene_pcp,但是p2 <html></html>作为父级返回,即使p3返回正确的<g></g>.最后一个版本似乎是一个等待发生的错误.有没有更好的办法？