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