使用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基准，就可以计算出端点的X和Y在您目前计算每个<g>元素的翻译以同样的方式，想必使用D3规模。