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

我意识到这个问题以前已经被问过，但我无法深入了解。

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

我想做的就是将硬币渲染在图表后面。我知道 D3 渲染是按照附加顺序进行的。

我尝试重新添加硬币，但似乎无法正常工作。

我尝试过在 DOM 中附加内容时重新排序，但不断收到错误，可能是因为变量在定义之前被调用等。

有人能给我一个如何用我的代码解决这个问题的例子吗？我不想让你为我做这项工作，但我已经胡思乱想了这么久，我似乎无法将别人的例子应用到我的身上。

thanks

我建议使用 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上面的示例，以便您可以看到它的实际效果。

这样做应该可以避免大量猜测何时向图表添加某些元素，并且还有助于将元素组织成更符合逻辑的排列。希望有帮助，祝你好运。