将在视觉上在一起的节点分组

Question

我正在d3js中实现力导向图。 我想将我的图形分为两半，并在渲染网络并完成forceSimulation后给两个半上色。

我在寻找什么在图像中进行了解释。

我指的是here。

我不想像链接中所述将组字段更新为我的数据，因为我的链接在多个事件上动态变化，这也在改变网络的方向，将组字段更新为数据正在创建组相同的节点，无论它们彼此靠近还是相距遥远。

当前，我正在使用窗口坐标来对此进行划分。

const screenWidth = window.screen.availWidth;
const halfScreen = screenWidth / 2;
nodes.selectAll().attr("fill", function (d) {
  return d.x <  halfScreen ? "blue" : "green";
});

但这不是个好主意。我很想知道其他可行的方法。

Answer 1

因此，我对您的问题的解释是：您希望将节点分为两组。最好每个都有一半的节点，其中每组中的节点之间的距离要尽可能小。

为此，我所知最好的算法是构造“最小生成树”的算法，例如Kruskal's algorithm。

使算法适应您的问题，您从无边缘的图形（副本）开始。然后添加按长度排序的边，最小的边。刚好有两个connected components时，您就停止这样做。这些相连的组件形成了组，其中节点之间的相互距离很小。

但是，这些组可能不会具有相同数量的节点，并且我不保证这会给您最小的相互距离。

编辑： 如果连接的组件多于1个，则可以通过从两个空组开始并向节点数最少的组重复添加组件（从大到大）来对它们进行分组。这可能会使您或多或少地平等。