用D3和Leaflet重复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
};

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

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