Question

我之前已经意识到这个问题，但我无法深究它。

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

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

我试图重新添加硬币，但似乎无法让它发挥作用。

我已经尝试重新排序，当事情被附加在DOM中但是可能因为变量在被定义之前被调用等而继续出错。

有人能举例说明如何使用我的代码修复此问题吗？我不想让你为我做这项工作但是我已经把头发拉了很长时间，我似乎无法将其他人的例子用于我的。

感谢

Answer 1

我建议使用代表“group”的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内置函数

此链接的报价：

publicgetCDMaster(): Promise<CDCurrentFlowDTO> { return this.http.post<CDCurrentFlowDTO>(Constants.BASE_HREF + '/getCDMaster', null, this.RequestJson).toPromise().catch(err => { throw err }); }：按顺序将每个选定元素重新插入为其父级的最后一个子级。 selection.raise()：按顺序将每个选定元素重新插入为其父级的第一个子级。

selection.lower()

see live example their jsFiddle

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

2 个答案: