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

【问题标题】：Is D3 Force Layout the best option for this graph?D3 Force Layout 是该图的最佳选择吗？
【发布时间】：2019-11-05 05:04:12
【问题描述】：

我想创建一个与本文中的图片类似的 D3 图表。

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

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

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

我想制作的图表（这是我的第一个问题，所以我没有将图像直接放在这篇文章中的声誉）：

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

【问题讨论】：

您可以设置节点的特定大小和边（链接）的特定长度，这不是问题...但是，您不能设置特定的位置这些节点：它们是根据节点大小和边缘长度（您之前设置的）动态计算的。因此，如果位置也是您想要精确控制的东西，那么强制导向不是您的最佳选择。
强制布局假设根据不同的标准对数据点施加力。你需要这个图表是动态的吗？对于静态的，创建 d3.tree 或 d3.cluster 布局就足够了...

标签： d3.js data-visualization force-layout

【解决方案1】：

在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; });

同样，您可以为每个链接添加dist 属性。然后像这样向您的模拟添加链接力：

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

对于一个工作示例，您可以查看我刚刚创建的this codepen。详情可随时查看官方API reference。

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

【讨论】：