javascript - d3.js 强制布局具有一些固定节点(在网格中)

Question

我正在使用 d3 和强制布局做一个项目 我有大约 50 个节点，我希望其中 10 个处于固定位置。 我知道如何修复位置并设置坐标，但我在计算其位置时遇到问题。

我想要的是将固定节点放置在以 Canvas 中心为中心的二维网格中。因此，如果只有一个固定节点，则将其放置在 Canvas 的中心，如果有四个节点，则应将它们均匀地放置在中心周围。

我需要在项目的其余部分使用强制布局，因此使用 d3-grid 之类的东西不是一个选项。 我查遍了网络，但没有发现任何有用的东西。

有什么帮助吗？

Answer 1

这显然不是 d3 相关的问题。您需要一个二维定位算法来设置固定节点的默认位置。

如果您有几个节点，并且只有一个圆，那么您可以通过应用简单的三 Angular 学来计算坐标。例如当 0,0 是圆心，r 是圆半径时，那么你可以将圆平均划分，然后将第一个节点旋转到你的位置。最喜欢的位置:

• 通过 1 个节点
  • x1 = 0,
    y1 = 0
• 通过 2 个节点
  • x1 = r,
    y1 = 0
  • x2 = r cos(0° + 360°/2) = r,
    y2 = r sin(0° + 360°/2) = 0
• 通过 3 个节点
  • x1 = 0,
    y1 = r
  • x2 = r cos(90° + 360°/3) = -r cos30° = -0.866r,
    y2 = r sin(90° + 360°/3) = -r sin30° = -0.5r
  • x3 = r cos(90° + 360°2/3) = r cos30° = 0.866r,
    y3 = r sin(90° + 360°2/3) = -r sin30°= -0.5r
• 由 4 个节点组成
  • x1 = r cos45° = 0.707r,
    y1 = r sin45° = 0.707r
  • x2 = r cos(45° + 360°/4) = -r sin45° = -0.707r,
    y2 = r sin(45° + 360°/4) = r cos45° = 0.707r
  • x3 = r cos(45° + 360°2/4) = -0.707r,
    y3 = r sin(45° + 360°2/4) = -0.707r
  • x4 = r cos(45° + 360°3/4) = 0.707r,
    y4 = r sin(45° + 360°3/4) = -0.707r

等等...另一种计算坐标的方法是使用 rotation matrix .

图 1 - 将圆均匀地划分为 2 个(绿色)、3 个(黄色)和 4 个(红色)节点

节点数超过 4 时，您可以使用网格:

图 2 - 带有图 1 中的圆圈的网格

还有其他几种方法，例如您可以使用任何类型的 2d lattice或voronoi而不是 grid 。您只需复制 d3 网格和 voronoi 布局的定位部分的代码即可。另一种选择是根据节点数等以增加的半径继续划分圆...

off:我认为扩展部队布局太难了。我在应用自定义力时遇到了很多问题，所以我决定编写我的自定义布局...:S 拥有一组适用的力会更好，这样人们就可以更轻松地构建自定义力布局。我想我会就此创建一个问题...