SVGTree | Handy JavaScript library for drawing trees | Graphics library

I have a basic Leaflet Map in one div and a d3-collapsible tree in another div (based on this Fiddle):

The Map (right div) loads a GeoJSON, the D3 tree (left div) loads the corresponding hierarchical JSon data. When I now expand a node in the tree, the map elements also shift (see red arrow).

I tried to rename all class-names, variables and id's but the issue persists. Here is a codepen with the data & code. I think it may have something to do with both leaflet and D3 using grouped SVG-elements (all in one ?) for nodes/features. I adjusted my tree to use var svgTree = without success..

If you cannot provide a specific solution to my problem, I would also be happy with a reference or example that demonstrates how to use D3 and Leaflet next to each other.

[Edit] Problem solved:

The Panning Function I tried to incorporate from Rob Schmuecker’s Block 7880033 needed both a tree svg (svgTree) and a container svg (svgGroup), which holds all the -elements. Finally, the centerNode function needs to call svgTree.select("g").transition() (and not d3.select("g") or svgGroup.select("g"))

Here is the updated code. The Code for the Leaflet map is in Body: