使用 D3 和 Leaflet 重复 SVG

Posted 2023-02-22

【中文标题】使用 D3 和 Leaflet 重复 SVG

【英文标题】：Repeating SVG with D3 and Leaflet

【发布时间】：2014-05-05 06:14:44

【问题描述】：

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

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

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

【问题讨论】：

您可以使用great arcs 进行连接吗？

不幸的是，没有。每个边和节点都必须保留其预定义的位置。 （这是为了学术可视化......他们很挑剔）。

@1080p 如果你找到答案，请写在这里:)

【参考方案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 组中可能会有所帮助，这样您就可以轻松地将其清除并在每次平移后重新开始。

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