Question

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

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

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

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

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

以下是问题编解码器的链接：

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

CODEPEN LINK

我错过了一些基本的东西吗？

Answer 1

如果您想在svg上制作圈子，请执行codepen link here

之类的操作

// 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));

});

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

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

1 个答案: