On zooming "foreign object"/ "rect" area is zooming exponentially as compared to html content of node

[pragyesh15]

To summarize above pic. On click on zoom button, I am firing the zoom event which is nothing but set the scale. Code is as following -

factory.zoomHandler = function() { d3.select("svg").select("g").attr("transform", "translate("+d3.event.translate+")scale("+d3.event.scale+")"); } var zoomListener = d3.behavior.zoom().scaleExtent([1, 3]).on("zoom", factory.zoomHandler);

svg.call(zoomListener); zoomListener.scale(factory.scale); zoomListener.event(svg);

The black border area is of "foreign object"/ "rect" while the colored border is of html content. So If I remove the black border you can imagine the look and feel of model. Edges will be too far from the node as below -

Any help will be well appreciated. One more thing is that on mouse scroll, zoom is working perfectly.

[jrgleason]

Pretty sure this is a duplicate of a couple of issues including https://github.com/cpettitt/dagre-d3/issues/227

[pragyesh15]

Thanks @jrgleason