用D3和Leaflet重复SVG

Question

所以我开始了另一个d3项目。这个项目包括在LeafletJS画布上用D3渲染静态网络图(允许在我们的其他可视化中使用标准化的缩放/平移控制)。这个网络的问题是它需要绕x轴(例如:右侧的节点可能连接到左侧的节点)。我希望能够无缝地在同一个图的多个实例之间移动，但我不确定解决此问题的最佳方法是什么。

到目前为止，我最好的想法是渲染可视化的两个完全相同的副本，并将它们放置在other...Then之后使用Leaflet的worldCopyJump让一个可视化渲染，而用户在另一个上平移。显然，对于需要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
};

临时副本似乎更难实现，但它可能有助于将副本几何图形放置在单独的svg组中，以便您可以轻松地将其清除，并在每次平移后重新开始。

我知道我的建议是非常高层次的--让我知道你的想法，这样我就可以进一步考虑它，如果我尝试填写更多的细节，也会有所帮助。