对D3中具有相同颜色的图边缘进行分组/聚类

Question

我在D3v4中有一个有向图，其中相同"组"编号(在关联的JSON中分配(的边以相同的颜色显示。当加载图形时，我试图使具有相同颜色的边看起来彼此相邻。

我尝试过更改D3的链接力，但我不确定它们是否是用于此任务的正确参数(是否可能对某个组具有正亲和力，但对其他组具有负亲和力？(。我还查看了节点集群的示例(例如这里和这里(，但我不知道应用于节点的参数是否可以应用于边。我很难找到解决问题的方法。

我声明我的forceSimulation是这样的：

let force = d3.forceSimulation(graph.nodes)
.force("charge", d3.forceManyBody())
.force("link", d3.forceLink(graph.edges))
.force("center", d3.forceCenter().x(w/2).y(h/2));

这是一个带有完整图形的JSFiddle。

Answer 1

forceLink.strength可用于根据数据指定链路强度。

可以创建一个变量来按组存储所需的链路强度，然后在.strength函数中使用，如下所示。

let strengthByGroup = [.5, 1, .1]
.force("link", d3.forceLink(graph.edges)
.strength(function(d) {
return strengthByGroup[d.group]
})
)

在更新的jsfiddle中演示。

为了更精确地控制链路的物理位置，可以使用forceLink.distance作为替代。