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