D3.js 如何基于元素而非节点顺序对D3力仿真节点进行分层？

我有一个D3V4力模拟，节点在屏幕上移动。每个节点都是一个组，由一个圆和它下面的一些文本组成。我如何排序，使圆圈始终位于底层，文本始终位于顶层。一个圆重叠一个圆是可以的，但一个圆重叠在文本上是永远不可以的。这是我得到的。当前，位于另一个节点前面的节点圆将与该节点的文本重叠

  this.centerNode = this.d3Graph.selectAll(null)
          .data(this.nodes.slice(10,20))
          .enter()
          .append("g")

          this.centerNode.append("circle")
            .attr("class", "backCircle")
            .attr("r", 60)
            .attr("fill", "red")


            this.centerNode
            .append("text")
            .attr("fill", "black")
            .attr("font-size", "20px")
            .attr("y", -60)
            .text("test text" )

---

您无法用当前的方法实现预期的结果。原因很简单：每组有一个文本和一个圆圈。但是，绘制顺序取决于组的顺序：

因此，将文本和

元素内的圆圈分组，您将按给定顺序绘制组，从而在文本上绘制一个圆圈（给定组的圆圈绘制在前面所有组的文本上）

这是一个演示（所有文本的顶部都是

Baz

圆圈，而

Bar

圆圈将位于

Foo

文本的顶部）：

var宽度=300；
var高度=200；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
变量节点=[{
姓名：“富”
}, {
名称：“酒吧”
}, {
名称：“Baz”
}];
变量链接=[{
“来源”：0，
“目标”：1
}, {
“来源”：0，
“目标”：2
}];
var simulation=d3.forceSimulation（）
.force（“link”，d3.forceLink（））
.force（“电荷”，d3.forceManyBody（））
.力（“中心”，d3.力中心（宽度/2，高度/2））；
var link=svg.selectAll（空）
.数据（链接）
.输入（）
.附加（“行”）
.style（“笔划”，“#ccc”）
.样式（“笔划宽度”，1）；
var color=d3.scaleOrdinal（d3.schemeCategory 20）；
var node=svg.selectAll（空）
.数据（节点）
.输入（）
.附加（“g”）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
。在（“结束”，dragended））；
var nodeCircle=node.append（“圆”）
.attr（“r”，20）
.attr（“笔划”、“灰色”）
.attr（“笔划宽度”，“2px”）
.attr（“填充”，函数（d，i）{
返回颜色（一）
});
var nodeTexts=node.append（“文本”）
.样式（“填充”、“黑色”）
.attr（“dx”，20）
.attr（“dy”，8）
.文本（功能（d）{
返回d.name；
});
模拟。节点（节点）；
模拟力（“链接”）
.链接（links）；
simulation.on（“tick”，function（））{
link.attr（“x1”，函数（d）{
返回d.source.x；
})
.attr（“y1”，函数（d）{
返回d.source.y；
})
.attr（“x2”，函数（d）{
返回d.target.x；
})
.attr（“y2”，功能（d）{
返回d.target.y；
})
node.attr（“transform”，“d）=>“translate”（“+d.x+”，“+d.y+”））
});
函数dragstarted（d）{
如果（！d3.event.active）simulation.alphaTarget（0.3.restart（）；
d、 fx=d.x；
d、 fy=d.y；
}
函数（d）{
d、 fx=d3.event.x；
d、 fy=d3.event.y；
}
函数d（d）{
如果（！d3.event.active）simulation.alphaTarget（0）；
d、 fx=null；
d、 fy=null；
}