HTML-Labels re-rendered with incorrect size/position after zoom in/out

Redrawing the graph after changing the zoom scale causes html labels to appear with the wrong size and position (too big or small for the node depending if zoomed in or out).

This may be related to issue #222

My (somewhat hacky) fix for this was to reset the zoom scale of the graph to 1 before making any changes to it. Once it has been reset, the required changes are made to the graph (add/remove nodes etc), and then it is redrawn. Finally the zoom scale is reset manually to whatever it was before. This has to be done through a callback:

svg.transition() .duration(0) .call( zoom.translate([0, 0]) .scale(1).event ) .each("end", function() { makeGraphChanges(); redraw(); resetZoom(); } );

Hopefully this helps in finding the solution.

[agg23]

This is still a current issue, and is trivially solved by resetting the scale to 1 before re-rendering the graph, as mentioned by @nicolas-mosch. It would be nice if this hack was not required, but I have not noticed any ill effects.

svg.call(this.zoom.scaleTo as any, 1);

[Elliot67]

Hey, Sorry to update such an old issue but there is a slightly better way to implement this hacky solution without using zoom events with d3.zoomTransform(...). Here is a working exemple :

const currentTransform = d3.zoomTransform(svgG.node());

transform(currentTransform.x, currentTransform.y, 1);
render(svgG, g);
transform(currentTransform.x, currentTransform.y, currentTransform.k);

function transform(translateX: number, transalteY: number, scale: number): void {
  svg.call(d3.zoom().transform, d3.zoomIdentity.translate(translateX, transalteY).scale(scale)); // update internal graph transform
  svgG.attr("transform", `translate(${translateX}, ${transalteY}) scale(${scale})`); // update DOM transform
}

Hope this helps someone !