How to make friends Leaflet and D3?

Question

JavaScript

The bottom line: there is a floor plan editor. Represents an SVG canvas, where "plan" is a base64 encoded image embedded in the SVG. The user can draw polygons or rectangles with the mouse, drag-and-copy-delete them.
The customer wanted to make friends with Leaflet for the whole thing. It seems like I just do everything

this.svg = d3.select(this.map.getPanes().overlayPane).append('svg')

But still, zoom! I find examples where shapes are added to the canvas via geoJSON. But I don’t have anything like that, my user draws shapes! There is a separate constructor for a polygon, for a rectangle.
I'm looking for a way to hang some kind of handler on the entire canvas that will reduce or enlarge it. How to do this, any examples? It seems to be nothing complicated, but I can't find it.
Code sheet - jsfiddle.net/gqwr5pma