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