d3 SVG отключается при панорамировании карты листовки

Question

Я использую d3.js, чтобы добавить визуальные эффекты на карту листовки.

D3 идет по карте отлично. Но когда я масштабирую карту, то панорамируйте карту, которую отключил SVG.

Я устанавливаю ширину и высоту SVG по ширине и высоте окна, например, так:

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

Когда я перемещаться по карте, то SVG остается в том же положении, в котором он был первоначально.

Вот ссылка на codepen проблемы:

Чтобы воссоздать эту проблему, увеличить на карте, а затем прокручивать карту.

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

}); 

Можно увеличить сковороду и круги никогда не будет резать.