使用D3和Leaflet重复SVG

Question

我正在启动另一个d3项目，该项目需要在LeafletJS画布上用D3渲染静态网络图（以允许我们的其他可视化具有标准化的缩放/平移控件）。这个网络的问题是它需要绕着x轴（例如：右侧的节点可能连接到左侧的节点）。我希望能够在多个相同图形的实例之间无缝地平移，但我不确定解决这个问题的最佳方法是什么。

迄今为止，我最好的想法是呈现两个完全相同的可视化，并将它们彼此相连...然后使用Leaflet的"worldCopyJump"功能，让用户在平移其中一个可视化时显示另一个。显然，由于一个可视化实例需要1500个以上的SVG对象，这可能不是最佳方法。

因此，我可能不需要确切的代码，但是否有人可以帮我想出一个可靠的方法？如果需要更多细节，我很乐意提供。

- 1080p

---

你能否使用大圆弧来连接吗？ - Lars Kotthoff

很遗憾，不行。每个边缘和节点都必须保留其预定义的位置。（这是为了学术可视化...他们非常挑剔）。 - 1080p

@1080p 如果你找到了答案，请在这里写下来 :) - daviestar

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组中，以便您可以轻松清除并在每次平移后重新开始。

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

- Peter