d3.js使用一些固定节点强制布局（在网格中）

Question

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

我想要的是将固定节点放置在以画布中心为中心的2d网格中。因此，如果只有一个固定节点，它将被放置在画布的中心，如果有四个节点，它们应该平均放置在中心周围。

我需要对项目的其余部分使用强制布局，因此使用类似d3-grid的东西不是一种选择。 我环顾网络，但我没有找到任何有用的东西。

任何帮助？

Answer 1

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

如果您有几个节点，并且只有一个圆圈，那么您可以通过应用简单的三角法来计算坐标。例如，当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拥有一组可应用的力量会好得多，因此ppl可以更容易地构建自定义力布局。我想我会在这个问题上创建一个问题......