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

问题描述

使用D3库，将SVG元素放到z顺序的顶部是一种有效的方法？

我的具体情况是一个饼图，当鼠标在给定片段上时，突出显示（通过向路径添加 stroke ）。生成我的图表的代码块如下：

  svg.selectAll（path）
 .data ）
 .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; 
} 
  

填写语句是确保我知道它正确地打开/关闭。它是。

我听说过使用 sort 是一个选项，但我不清楚如何

$ b

更新：

我用下面的代码修复了我的特殊情况，它在 mouseover 事件上向SVG添加了一个新弧，以显示一个突出显示。

  svg.selectAll（path）
 .data（d）
 .enter $ b .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）。 
}）; 
  

解决方案

开发人员提出的解决方案之一是：使用D3的排序运算符重新排序元素。 （请参阅 https://github.com/mbostock/d3/issues/252 ） / p>

在这种情况下，可以通过比较元素的数据或位置（如果它们是无数据元素）来对元素进行排序：

  .on（mouseover，function（d）{
 svg.selectAll（path）。sort（function（a，b）{// select the parent and排序路径的
 if（a.id！= d.id）return -1; // a不是hovered元素，发送a到后面
 else return 1; // a hover元素，将a带到前面
}）; 
}）
  

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

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

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

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

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

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

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.

UPDATE:

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

解决方案

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屋！