Javascript D3强制布局：如何强制一组节点停留在给定区域

在D3Force布局图中，我试图根据节点组强制某些节点停留在给定区域

有一个中心节点，它是固定的。我希望通过红线连接的节点保持在屏幕高度的前1/3，通过笔划线连接的节点保持在第二个1/3，通过蓝线连接的节点保持在最后1/3

但我希望它平滑：在加载时，节点移动到给定的区域，并远离另一个区域。与中心节点的距离可能不是固定的

每个组中的节点数是可变的

如何使用d3.js v4实现这一点

---

谢谢您的帮助：）

您必须使用

forceX

，它：

沿x轴向给定位置x创建新的定位力。如果未指定x，则默认为0

在本演示中（基于），

节点

数组包含一个

组

：

nodes:[
    {"id": "A", "group": 1},
    {"id": "B", "group": 2},
    {"id": "C", "group": 2},
    //etc...
]

使用此

组

值，我们可以将节点定位到左侧或右侧。这只是一个示例，请根据您的代码进行更改：

.force("x", d3.forceX(function(d){
    if(d.group === 2){
        return width/3
    } else if (d.group === 3){
        return 2*width/3
    } else {
        return width/2 
    }
}))

因此，如果节点属于组2（青色节点），我们将其定位在宽度的1/3处，如果节点属于组3（橙色节点），我们将其定位在宽度的2/3处

定位并不完美，因为其他参数可能会影响定位，如电荷强度和链路距离

这是一个演示：

var图={
节点：[
{“id”：“A”，“group”：1}，
{“id”：“B”，“group”：2}，
{“id”：“C”，“group”：2}，
{“id”：“D”，“group”：2}，
{“id”：“E”，“group”：2}，
{“id”：“F”，“group”：3}，
{“id”：“G”，“group”：3}，
{“id”：“H”，“group”：3}，
{“id”：“I”，“group”：3}
],
链接：[
{“源”：“A”，“目标”：“B”，“值”：1}，
{“源”：“A”，“目标”：“C”，“值”：1}，
{“源”：“A”，“目标”：“D”，“值”：1}，
{“源”：“A”，“目标”：“E”，“值”：1}，
{“源”：“A”，“目标”：“F”，“值”：1}，
{“源”：“A”，“目标”：“G”，“值”：1}，
{“源”：“A”，“目标”：“H”，“值”：1}，
{“源”：“A”，“目标”：“I”，“值”：1}，
]
};
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”）；
var color=d3.scaleOrdinal（d3.schemeCategory 20）；
var simulation=d3.forceSimulation（）
.force（“link”，d3.forceLink（）.id（函数（d）{return d.id；}）.distance（100））
.force（“电荷”，d3.forceManyBody（））
.力（“x”，d3.力（功能（d）{
如果（d.组===2）{
返回宽度/3
}else if（d.group==3）{
返回2*宽度/3
}否则{
返回宽度/2
}
}))
.力（“y”，d3.力（高度/2））
.力（“中心”，d3.力中心（宽度/2，高度/2））；
var link=svg.append（“g”）
.attr（“类”、“链接”）
.selectAll（“行”）
.数据（图表.链接）
.enter（）.append（“行”）
.attr（“笔划宽度”，函数（d）{return Math.sqrt（d.value）；}）；
var node=svg.append（“g”）
.attr（“类”、“节点”）
.selectAll（“圆圈”）
.数据（图.节点）
.enter（）.append（“圆”）
.attr（“r”，5）
.attr（“fill”，函数（d）{返回颜色（d.group）；}）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
。在（“结束”，dragended））；
node.append（“标题”）
.text（函数（d）{返回d.id；}）；
模拟
.nodes（图.nodes）
。在（勾选）上；
模拟力（“链接”）
.links（图形链接）；
函数勾选（）{
链接
.attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
节点
.attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回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；
}

.links行{
行程：#999；
笔划不透明度：0.6；
}
.节点圆{
冲程：#fff；
笔划宽度：1.5px；
}

---

这项工作非常有效。但是如何增加同一组的两个节点之间的距离呢？他们是如此的融入其中。我知道θ可以用于此目的，但我无法找到在何处附加θ值？