在D3.js中重新排序SVG(z-index)的元素

Question

我意识到这个问题之前已被问过,但我无法深究它.

这是我的图表... http://www.gogeye.com/financialnews/piechart/index3.html

我想做的就是在图表后面有硬币渲染.我知道D3渲染它们是为了附加它们.

我试图重新附加硬币,但似乎无法让它工作.

我已经尝试重新排序,当事情被附加在DOM中,但可能因为变量在被定义之前被调用而不断出错.

有人能举例说明如何用我的代码解决这个问题吗？我不希望你为我做这项工作,但我已经把头发拉了很长时间,我似乎无法将其他人的例子用于我的.

谢谢

Answer 1

我建议使用svg g元素创建一些"层" ,代表"组".

渲染图表时,可以先定义图层:

var layer1 = svg.append('g');
var layer2 = svg.append('g');
var layer3 = svg.append('g');
// etc... for however many layers you need

然后,当您追加新元素时,您可以决定要将它们放在哪个层上,并且将它们分配给它们的顺序无关紧要,因为组元素已经添加到DOM中,并且是有序的.例如:

var layer1 = svg.append('g');
var layer2 = svg.append('g');

var redCircle = layer2.append('circle')
    .attr('cx', 50)
    .attr('cy', 50)
    .attr('r', 16)
    .attr('fill', 'red')

var blueSquare = layer1.append('rect')
    .attr('x', 25)
    .attr('y', 25)
    .attr('width', 50)
    .attr('height', 50)
    .attr('fill', 'blue');

在这种情况下,即使最后创建蓝色方块,红色圆圈也会在蓝色方块上方可见.这是因为圆和正方形是不同组元素的子元素,它们是预定义的顺序.

这是上面示例的一个FIDDLE,因此您可以看到它的实际效果.

这样做应该会在何时向图表添加某些元素时进行大量的猜测,并且还有助于将元素组织成更合理的排列.希望有所帮助,祝你好运.

Answer 2

我正在使用 D3.js，发现它有一个内置函数，可以在原始绘图后以编程方式更改 SVG 元素的 z 顺序。

RipTutorial：svg--the-drawing-order涵盖了 d3 内置函数

引用自此链接：

selection.raise()：按顺序重新插入每个选定元素，作为其父元素的最后一个子元素。selection.lower()：按顺序重新插入每个选定元素，作为其父元素的第一个子元素。

d3.selectAll("circle").on("mouseenter", function(){
    d3.select(this).raise(); 
});

d3.selectAll("circle").on("mouseleave", function(){
    d3.select(this).lower(); 
});

查看他们的 jsFiddle 实例