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

Question

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

可以通过双击其他点来添加点数。在一个点上悬停时，我希望屏幕上的点和所有合作伙伴之间有链接。

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

这就是我的DOM的样子：

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

Answer 1

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

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

重要提示：不会因此示例中强制布局的存在以及强制布局与这些链接（通过调用{{1}传递到其中）一起使用而分散注意力}）。该示例的这一方面可能与您尝试实现的目标不同。

然而，执行会注意force.links(links)数组是如何构造的 - 数组的每个元素都是一个指向links和source基准的对象。在您的情况下，您希望使用类似的target数组，其中links是鼠标下的节点，source是一个连接到的节点它。因此，您最终会得到一系列链接，这些链接都具有相同的target基准但唯一的source基准。

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

给定path和source基准，您可以使用与当前计算每个target元素的平移相同的方式计算端点的x和y，大概使用d3规模。