使用 D3 更新 SVG 元素 Z-Index [英] Updating SVG Element Z-Index With D3

问题描述

使用 D3 库将 SVG 元素置于 z 顺序顶部的有效方法是什么?

What is an effective way to bring an SVG element to the top of the z-order, using the D3 library?

我的具体场景是一个饼图，当鼠标悬停在给定的一块时，它会突出显示(通过向 path 添加一个stroke).生成图表的代码块如下:

My specific scenario is a pie chart which highlights (by adding a stroke to the path) when the mouse is over a given piece. The code block for generating my chart is below:

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 都不起作用.

I've tried a few options, but no luck so far. Using style("z-index") and calling classed both did not work.

top"类在我的 CSS 中定义如下:

The "top" class is defined as follows in my CSS:

.top {
    fill: red;
    z-index: 100;
}

fill 语句用于确保我知道它正确打开/关闭.是.

The fill statement is there to make sure I knew it was turning on/off correctly. It is.

我听说使用 sort 是一种选择，但我不清楚如何实现将选定"元素带到顶部.

I've heard using sort is an option, but I'm unclear on how it would be implemented for bringing the "selected" element to the top.

更新:

我使用以下代码修复了我的特殊情况，它在 mouseover 事件上为 SVG 添加了一个新弧线以显示高亮显示.

I fixed my particular situation with the following code, which adds a new arc to the SVG on the mouseover event to show a highlight.

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

推荐答案

开发人员提出的解决方案之一是:使用 D3 的排序运算符对元素重新排序."(参见 https://github.com/mbostock/d3/issues/252)

One of the solutions presented by the developer is: "use D3's sort operator to reorder the elements." (see https://github.com/mbostock/d3/issues/252)

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

In this light, one might sort the elements by comparing their data, or positions if they were dataless elements:

.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
  });
})

这篇关于使用 D3 更新 SVG 元素 Z-Index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！