javascript - 使用 d3 绘制点之间有联系的散点图？

Question

我正在尝试使用 d3 进行可视化，它基本上是一个带有点之间链接的散点图。 (我已附上现有基于 Java 的可视化的 .gif)

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

我有这样的部分:双击节点时，会添加其合作伙伴。我需要帮助的是绘制链接(主要是我无法理解如何获得绘制链接所需的 x1,y1,x2,y2 值)。

这就是我的 DOM 的样子:

我在网上看到了很多例子，但不知何故无法找到解决方案 - 如果有人可以将我链接到类似的可视化或分享 fiddle /给出一些关于如何实现这一目标的指示，我将非常感激。

Answer 1

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

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

重要提示:不要因为本例中强制布局的存在以及强制布局与这些链接一起工作的事实(通过调用 force.links(links) 传递到其中)而分心。 。该示例的这方面可能没有与您想要实现的目标相当的内容。

但是，请注意 links构造数组——数组的每个元素都是一个指向 source 的指针的对象和target数据。就您而言，您需要使用类似的 links数组，其中 source是鼠标下的节点，target是与其连接的节点。因此，您最终会得到一系列具有相同 source 的链接。数据但唯一target数据。

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

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