javascript 在 D3.js 中重新排序 SVG ( z-index ) 的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24045673/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reorder elements of SVG ( z-index ) in D3.js
提问by bboybeatle
I realise this question has been asked before but I can't get to the bottom of it.
我意识到以前有人问过这个问题，但我无法深入了解。
Here is my chart... http://www.gogeye.com/financialnews/piechart/index3.html
这是我的图表... http://www.gogeye.com/financialnews/piechart/index3.html
All I want to do is have the coin render behind the graph. I know D3 renders in order they are appended.
我想要做的就是在图形后面渲染硬币。我知道 D3 渲染是按顺序附加的。
I have tried to re-append the coin but can't seem to get it working.
我试图重新添加硬币，但似乎无法让它工作。
I've tried reordering when things are appended in the DOM but keep getting errors probably because variables are getting called before being defined etc.
我已经尝试在 DOM 中附加内容时重新排序，但不断收到错误可能是因为在定义之前调用了变量等。
Can someone give me an example of how to fix this with my code? I don't want you to do the work for me but I've been pulling my hair out for so long, I can't seem to apply other peoples examples to mine.
有人可以给我一个如何用我的代码解决这个问题的例子吗？我不想让你为我做这项工作，但我一直在拔头发，我似乎无法将其他人的例子应用到我的身上。
thanks
谢谢
回答by jshanley
I would recommend creating some "layers" using svg gelements which stands for "group".
我建议使用g代表“组”的svg元素创建一些“层”。
When you render your chart, you can first define your layers:
渲染图表时，您可以先定义图层：
var layer1 = svg.append('g');
var layer2 = svg.append('g');
var layer3 = svg.append('g');
// etc... for however many layers you need
Then when you append new elements, you can decide which layer you want them to be on, and it won't matter what order you assign them in, because the group elements have already been added to the DOM, and are ordered. For example:
然后，当您添加新元素时，您可以决定希望它们位于哪个层，并且分配它们的顺序无关紧要，因为组元素已经添加到 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');
In this case the red circle will be visible above the blue square even though the blue square was created last. This is because the circle and the square are children of different group elements, which are in a pre-defined order.
在这种情况下，即使蓝色方块是最后创建的，红色圆圈也会在蓝色方块上方可见。这是因为圆形和方形是不同组元素的子元素，它们按预先定义的顺序排列。
Here's a FIDDLEof the above example so you can see it in action.
这是上面示例的FIDDLE，因此您可以看到它的实际效果。
Doing this should take a lot of the guesswork out of when to add certain elements to your chart, and it also helps to organize your elements into a more logical arrangement. Hope that helps, and good luck.
这样做应该不需要大量猜测何时将某些元素添加到图表中，并且还有助于将元素组织成更合乎逻辑的排列。希望能帮到你，祝你好运。
