javascript - 用 D3 和 Leaflet 重复 SVG

Question

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

到目前为止，我最好的想法是渲染两个相同的可视化副本并将它们一个接一个地放置...然后使用 Leaflet 的 worldCopyJump 让一个可视化呈现，同时用户平移另一个。显然，对于一个需要 1500 多个 SVG 对象的可视化实例，这可能不是最佳方法。

所以你可能不需要确切的代码，但有人能帮我想出一个可靠的方法吗？如有必要，我很乐意提供更多详细信息。

Answer 1

避免重复网络图的简单但复杂的方法是根据 Canvas 的平移位置更新网络图节点的坐标，并在必要时在另一侧添加临时副本(当链接与图的边界)。问题的第一部分比较简单。基于以下示例:

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

您可以更新简单转换:

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

要使用可以传递给 d3 更新代码的平移位置(在 Canvas 平移事件上运行的代码，以便计算和传递平移位置):

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

临时副本似乎更难实现，但将副本几何放置在单独的 svg 组中可能会有所帮助，这样您就可以轻松将其删除并在每次平移后重新开始。

我知道我的建议非常高 - 让我知道您的想法，以便我进一步考虑，以及如果我尝试填写更多详细信息是否会有所帮助。