如何使用 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; };

所以，步骤是：

1. 但是，使用 D3.js 构建图表，
2. 用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();