使用 d3 的点之间链接的散点图？

Question

我正在尝试使用 d3 进行可视化，这基本上是一个散点图，点之间有链接。 （我附上了现有的基于 java 的可视化的 .gif 文件）

可以通过双击其他点来添加这些点。在将鼠标悬停在一个点上时，我希望在该点与其所有合作伙伴之间在屏幕上绘制链接。

我有双击节点时添加其伙伴的部分。我需要帮助的是绘制链接（主要是我无法理解如何获得绘制链接所需的 x1,y1,x2,y2 值）。

这就是我的 DOM 的样子：

我在网上看到了很多示例，但不知何故无法找到解决方案 - 如果有人可以将我链接到类似的可视化或分享小提琴/就如何实现这一点提供一些指示，我将非常感激。

Answer 1

首先是简单的东西：这里是2 mechanisms for drawing the lines。

接下来，就线条的数据表示而言，check out 在使用强制导向布局时通常如何绘制链接。

重要提示：不要被本示例中存在的强制布局以及强制布局与这些链接（通过调用force.links(links) 传递给它）一起工作的事实分心.该示例的这方面可能与您要实现的目标没有等价物。

但是，请注意links 数组是如何构造的——数组的每个元素都是一个对象，带有指向source 和target 基准的指针。在您的情况下，您需要使用类似的links 数组，其中source 是鼠标下的节点，target 是连接到它的节点。因此，您最终会得到一组链接，它们都具有相同的source 基准但唯一的target 基准。

然后您可以将links 数组（通过通常的.data() 方法）绑定到line 或path 元素的d3 选择。绑定后，您可以使用通常的输入、更新、退出模式来追加、更新和删除（鼠标移出）绘制的线。

给定source 和target 基准，您可以按照当前计算每个<g> 元素的平移的相同方式计算端点的x 和y，大概使用d3 比例。