Javascript 平移传单地图时d3 SVG被切断

我正在使用d3.js在传单地图上添加视觉效果

d3在地图上显示得很好。但当我缩放地图然后平移地图时，SVG被切断

我将SVG的宽度和高度设置为窗口的宽度和高度，如下所示：

svg.attr("width", window.innerWidth);
svg.attr("height", window.innerHeight);

当我在地图周围平移时，SVG保持原来的位置

以下是问题代码笔的链接：

要重新创建问题，请放大地图，然后平移地图

---

我在这里遗漏了一些基本的东西吗？

如果你想在svg上画一个圆圈，那么可以做如下操作

---

您可以缩放平移，圆圈将永远不会剪切。

如果您想在svg上创建圆圈，请执行以下操作

您可以缩放平移，圆圈将永远不会剪切

// Map details
L.mapbox.accessToken = 'pk.eyJ1Ijoic3RlbmluamEiLCJhIjoiSjg5eTMtcyJ9.g_O2emQF6X9RV69ibEsaIw';
var map = L.mapbox.map('map', 'mapbox.streets')
  .setView([53.3942 , -2.9785], 16);

// Sample Data
var data = [
  { "coords" : [ 53.3942 , -2.9785 ]},
  { "coords" : [ 53.4082 , -2.9837 ]}
];

// Loop through data and create d.LatLng 
data.forEach(function(d) {
  map.addLayer(L.circle([d.coords[0], d.coords[1]], 200));

});