使用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規模。