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

一尘不染

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

javascript

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

阅读 715

2020-05-01

共1个答案

一尘不染

开发人员提出的解决方案之一是：“使用D3的sort运算符对元素进行重新排序”。

有鉴于此，人们可以通过比较元素的数据或元素的位置（如果它们是无数据元素）来对元素进行排序：

.on("mouseover", function(d) {
    svg.selectAll("path").sort(function (a, b) { // select the parent and sort the path's
      if (a.id != d.id) return -1;               // a is not the hovered element, send "a" to the back
      else return 1;                             // a is the hovered element, bring "a" to the front
  });
})

2020-05-01