重複使用D3和小冊子的SVG

Question

所以我開始另一個D3項目。該項目包括在LeafletJS畫布上渲染D3中的靜態網絡圖（以允許在其他可視化中的標準化縮放/平移控制）。這個網絡的問題是它需要圍繞x軸（例如：右側的節點可能連接到左側的節點）。我希望能夠跨同一個圖的多個實例平滑移動，但我不確定這個問題的最佳方法是什麼。

到目前爲止，我的最好想法是呈現兩個相同的可視化副本，並將它們依次放置在一起......然後使用Leaflet的worldCopyJump在用戶跨越另一個平移時使一個可視化呈現。顯然，儘管可視化的一個實例需要1500多個SVG對象，但這可能不是最好的方法。

所以你可能不需要確切的代碼，但有人可以幫我想一個可靠的方法嗎？如有需要，我會很樂意提供更多細節。

Answer 1

避免複製網絡圖的乾淨但複雜的方法是根據畫布的平移位置更新網絡圖節點的座標，並在必要時在另一側添加臨時副本（當鏈接相交時圖形的邊界）。問題的第一部分比較簡單。基於下面的例子：

http://bl.ocks.org/jose187/4733747

您可以更新簡單的變換：

var transform = function(d) { return "translate(" + d.x + "," + d.y + ")"; }; 

要與運行在平移位置，你可以沿着傳遞給你的D3更新代碼（代碼工作一個帆布盤事件，以便平移位置可以計算和傳遞）：

var transform = function(d, canvasPanX) { 
    // figure out if the point in question is off the canvas and 
    // reposition it to a visible position 
}; 

臨時重複似乎更難以impl但它可能有助於將重複的幾何體放置在單獨的svg組中，以便您可以輕鬆將其擦除，並在每次平移後重新開始。

我知道我的建議是非常高的水平 - 讓我知道你的想法，以便我可以進一步思考，以及如果我試圖填寫更多的細節，它是否會有所幫助。