javascript - 如何使用 D3.js 强制布局生成具有边权重的网络图

Question

我阅读了很多关于 D3.js 强制布局的代码，我发现边缘元素只是“源”和“目标”。我想生成一个图形，其布局类似于 Gephi 中的“Altas”。在我的数据中，边缘具有“权重”元素，它描述了它链接的节点的相关性，并且在开始力布局时应该考虑到这一点。这样相似的节点就可以聚集在一起。有没有办法实现，或者力布局中使用的物理模型与边缘的权重无关？

Answer 1

是的，这在 D3.js 中是可能的，但是，我推荐 webcola 库，因为它更简单、更快，并且与 D3.js 配合得很好。

除了source，每条边还可能包含其他信息。和 target .因此，很容易添加 weight属性，例如:

let edge = {
  source: node1,
  target: node2,
  weight: 2
};

使用 webcola ( https://github.com/tgdwyer/WebCola/ ) 时，您可以添加一些约束以使用您的权重，或者您可以使用 linkDistance作为函数，这里解释:https://github.com/tgdwyer/WebCola/wiki/link-lengths ，例如:

let weightFactor = 10;
let d3cola = cola.d3adaptor(d3)
                   .size([500, 400])
                   .linkDistance(function (l) { return l.weight * weightFactor; };

所以，步骤是:

使用 D3.js 构建您的图表，但是，

用 webcola 模拟

您可以像这样为 d3.js 创建一个 webcola 模拟实例:

d3cola.avoidOverlaps(true)
      .handleDisconnected(false)
      .start(30);

let simulation = this.d3cola
    .nodes(graph.nodes) // graph is your graph
    .links(graph.edges)
    .start();