添加到传单的 D3 SVG 在平移和缩放时被切断

Question

我正在添加一个 D3 SVG，其中包含具有 lat 和 lng 数据的节点，并通过以下方式链接到传单地图：

var mapLayer = d3
    .select(backgroundMap.getPanes().overlayPane)
    .append('svg')

在我平移和缩放之前，一切都很好。带有 SVG 的元素定位正确，但由于 SVG 尺寸而被截断。

我对 Leaflet 很陌生，我认为我缺少一些基本的东西 - 我如何确保始终可以看到整个 SVG？

Answer 1

现在已排序。

大部分解决方案都可以在这里找到：

https://bost.ocks.org/mike/leaflet/

但是我没有使用 GeoJSON 文件。可以在此处发布的 jsfiddle 中找到如何完成此操作的示例：

SVG circles don't get repositioned when zooming leaflet map

我必须添加额外的填充以避免节点被剪裁 - 请参阅 sync d3.js map and leaflet map

我为 svg 设置的视图框值也必须删除。