时间戳

首页 > 解决方案 > 在 D3 中对具有相同颜色的图边进行分组/聚类

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

问题描述

我在 D3 v4 中有一个有向图，其中相同“组”编号（在关联的 JSON 中分配）的边缘以相同的颜色显示。我试图在加载图形时使具有相同颜色的边缘彼此相邻。

我曾尝试更改 D3 的链接力，但我不确定它们是否是调整此任务的正确参数（是否有可能对某个组具有正亲和力但对其余组具有负亲和力？）。我还查看了节点聚集的示例（例如here和here），但我不知道应用于节点的参数是否可以应用于边缘。我在寻找解决我遇到的问题的方法时遇到了很多麻烦。

我这样声明我的 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 。

标签： javascriptd3.jsgraph

解决方案

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

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

let strengthByGroup = [.5, 1, .1]

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

更新后的 jsfiddle中的演示。

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

推荐阅读