使用D3更新SVG元素Z-索引

Question

使用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均无效。在我的CSS中，“ top”类的定义如下：.top {    fill: red;    z-index: 100;}该fill语句可以确保我知道它正确打开/关闭。它是。我听说使用sort是一个选项，但是我不清楚如何将“ selected”元素置于顶部。更新：我使用以下代码修复了我的特殊情况，该代码在mouseover事件上为SVG添加了新弧线以显示突出显示。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();    });