Redisplaying HTML after zooming with Dagre d3

Question

Edit I found a solution that uses a slightly older version of the dagre-d3 library (4.11). If someone can find a problem with the latest version, this will help too. thank you

I use Dagre d3 to draw some graphs.

When I initially present my schedule, I do

g = new dagreD3.graphlib.Graph() .setGraph({}) .setDefaultEdgeLabel(function() { return {}; }); var svg = d3.select("svg"), inner = svg.select("g"); svgGroup = svg.append("g"); var render = new dagreD3.render(); render(d3.select("svg g"), g); var zoom = d3.behavior.zoom().on("zoom", function() { inner.attr("transform", "translate(" + d3.event.translate + ")" + "scale(" + d3.event.scale + ")"); currentZoomScale = d3.event.scale; currentPosition = d3.event.translate; }); svg.call(zoom); 

Then, when the user clicks on a specific node, I want to add HTML to this node label. This does not appear if I do not redraw the graph that I am doing with the following:

 g.node(id).label += "<div>" + inputTemplate + "</div>"; var zoom = d3.behavior.zoom() .scale(currentZoomScale) .on("zoom", function() { inner.attr("transform", "translate(" + d3.event.translate + ")" + "scale(" + d3.event.scale + ")") }); svg.call(zoom); d3.select("svg").on("dblclick.zoom", null); inner.attr("transform", "translate(" + currentPosition + ")" + "scale(" + currentZoomScale + ")"); 

I thought that by supporting currentPosition and currentZoomScale , I could make sure the graph stays good after scaling and re-rendering. But this is not so. All my nodes become smaller if I zoom out, and larger if I zoom in.

Answer 1

I don't understand the problem very clearly, but maybe because you included .scale(currentZoomScale) in the second line

 var zoom = d3.behavior.zoom() .scale(currentZoomScale) .on("zoom", function() { inner.attr("transform", "translate(" + d3.event.translate + ")" + "scale(" + d3.event.scale + ")") }); svg.call(zoom); d3.select("svg").on("dblclick.zoom", null); inner.attr("transform", "translate(" + currentPosition + ")" + "scale(" + currentZoomScale + ")"); 

and then you scale it again in innner.attr() ?

Answer 2

It seems to me that the problem is here:

 var svg = d3.select("svg"), inner = svg.select("g"); svgGroup = svg.append("g"); 

If you look at the order of your code, there is no <g> when defining inner . So at the moment inner is null . When you redraw the chart, the group is now there, and inner no longer null .

Thus, a possible solution is to simply reorder:

 var svg = d3.select("svg"), svgGroup = svg.append("g");//we first append the <g>.. inner = svg.select("g");//and only after that we select it