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

Question

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

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作为函数，如下所述：{{ 3}}，例如：

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();