d3 SVG being cut off when panning a leaflet map

Question

I am using d3.js to add visuals on to a leaflet map.

The d3 goes on the map fine. But when I zoom the map then pan the map the SVG is cut off.

I am setting the width and height of the SVG to the width and height of the window, like so:

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

When i pan around the map, the SVG stays in the same position it was in originally.

Here is a link to a codepen of the problem:

To re-create the issue, zoom in on the map, then pan the map.

CODEPEN LINK

Am i missing something fundamental here?

Answer 1

If you want to make circle on svg then do something like 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));

});

You can zoom pan and the circles will never cut.