[Solved]-Make SVGs on top of leaflet map not respond to pan events-d3.js

You're putting all your D3 stuff inside a SVG container which is managed by Leaflet:

/* We simply pick up the SVG from the map object */
var svg = d3.select("#map").select("svn")

...and Leaflet takes care of moving and zooming around anything which is inside a map container.

is there any way around that?

Yes. Don't reuse Leaflet's <svg> root containers from L.SVG renderers for your own purposes.