使用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();

    });