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

Question

我阅读了很多关于使用D3.js强制布局的代码，我发现边缘元素只有'source'和'target'。我想生成一个布局类似于 Gephi 中的 'Altas' 的图形。在我的数据中，edge有'weight'的元素，描述了它链接的节点的相关性，在开始力布局时应该考虑到这一点。这样相似的节点就可以聚集在一起。有没有办法实现或者力布局中使用的物理模型与边的权重无关？

Answer 1

是的，这在 D3.js 中是可能的，但是，我推荐 webcola 库，因为它更简单、更快，并且与 [=40= 配合得很好].

每条边可能包含除source和target之外的其他信息。因此，很容易添加 weight 属性，例如：

let edge = {
  source: node1,
  target: node2,
  weight: 2
};

使用 webcola 时（https://github.com/tgdwyer/WebCola/), you can add some constraints to use your weights, or you can use the linkDistance as a function, explained here: 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; };

所以，步骤是：

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

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

how to generate a network graph with edge weight using D3.js force layout

javascript

d3.js

force-layout