D3 Force Layout 是该图的最佳选择吗？

Question

我想创建一个 D3 图形，就像这个 post 中的图像一样。

强制布局似乎是最好的选择，但是，我的节点必须有不同的距离，并且每个节点必须有不同的大小。

那么，我应该坚持强制布局吗？

我找不到任何与我的问题类似的例子，很难理解如何写下一些代码来实现这些不同的距离和大小。

我想做的图表（这是我的第一个问题，所以我没有名誉直接把图片放在这个post）：

https://i.ibb.co/Tk0hHkv/toaskd3.png

Answer 1

不同的link距离和不同的半径可以在d3js中实现。

您可以为每个节点添加半径属性，即您的节点应该看起来像 {r:5, id:1, ...}。然后，当需要创建相应的 svg 元素时，您可以执行类似

的操作

var circles = svg.append("g").selectAll("circle").data(nodes);
circles.enter().append("circle").attr("r", function(d) { return d.r; });

同样，您可以为每个 link 添加一个 dist 属性。然后像这样在你的模拟中添加一个 link 力：

var sim = d3.forceSimulation(nodes)
  .force("link", d3.forceLink(links)
              .distance(function(l){
                return l.dist;
              })
              .strength(1)
  );

对于工作示例，您可以查看 this codepen I just created. You can always check the official API reference 了解详细信息。

在我看来，D3 的力布局是描绘图形的一个非常灵活的选择。

D3 Force Layout 是该图的最佳选择吗？

Is D3 Force Layout the best option for this graph?

d3.js

data-visualization

force-layout