Question

我想创建一个D3图形，就像这篇文章中的图片。

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

那么，我应该坚持使用“部队布局”吗？

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

我要绘制的图形（这是我的第一个问题，因此我没有信誉直接在该帖子中放置图片）：

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

Answer 1

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

您可以为每个节点添加一个radius属性，即您的节点应类似于{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; });

类似地，您可以向每个链接添加dist属性。然后将链接力添加到您的模拟中，如下所示：

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

对于一个有效的示例，您可以检查我刚刚创建的this代码笔。您随时可以查看官方API reference以获得详细信息。

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

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

1 个答案: