HTML labels not respecting zoomscale after re-drawing

[jazzmes]

Hi, First of all, congrats on a great tool! Best I found for graph layouts on d3. I have an issue with HTML labels that they adjust to the current level of zoom after the redraw.

I was able to replicate something similar on the interactive demo:

1. zoom in (or out)
2. make a change to force redrawing
3. the HTML labels are drawn in the original size

[cpettitt]

Quick confirmation that I am able to repro this issue. I haven't had a chance to look into it yet.

[jrgleason]

This is the same one I have been dealing with. It really is just the way that d3 handles shapes for example this fails....

https://plnkr.co/edit/6t1VnAgBDkN3yChEKqzS?p=preview

But this works...

https://plnkr.co/edit/bL8cHFrqPN2GXYUmVxKY?p=preview

This seems to be what is required (this is using the bounding box but it would be the same for a text label)...

rect.attr("width", fo.attr("width") * (1/$scope.scale));
rect.attr("height", fo.attr("height") * (1/$scope.scale));

So essentially we need to be able to pass a scale value (?) to the render method. I am not sure if polygons or circles are handled the same way.

[jrgleason]

Also do me a favor and see if you have the same issues with

https://github.com/jrgleason/dagre-d3

see https://github.com/cpettitt/dagre-d3/pull/223/files

[jazzmes]

Btw, not sure if it helps, but I have an old version of the code (3.10.0). that handles the zoom perfectly. I will try to take a look at the differences as soon as I have some time...

[jrgleason]

Could be related to a commit I did removing this...

var w, h;
  div
    .each(function() {
      w = this.clientWidth;
      h = this.clientHeight;
    });

  fo
    .attr("width", w)
    .attr("height", h);

  return fo;

In favor of bounding boxes. Going back to the previous code doesn't appear to have any negative effects on my code so maybe it was just a bonehead move on my part. Although, I would still like someone who understands the different height values to confirm this theory. I am still seeing a little jumping around but I am not seeing the same scaling issues. I will work on a pull request.

[jrgleason]

Also I agree with the TODO comment that this is really hacky. I think we should maybe spend some time thinking about it.

[jrgleason]

Mine won't merge cleanly right now can someone else make the change and then create the pull request?

[jrgleason]

Check out this...

https://github.com/cpettitt/dagre-d3/pull/233/files

For some reason my windows install changed the permissions so be careful on merge I kind of need help fixing it.

This is a rather large change so I would appreciate any review.

[pragyesh15]

I'd tried to test your changes and everything looks good related to zoom except the following issue -

Each time when I am zooming in/out, it is adding one more label and keep on growing.

[jrgleason]

yeah it depends on what version you are using let me make sure I have that fix checked in

[jrgleason]

Can you confirm that the JS file you are using has this change...

var thisGroup = d3.select(this);
var labelGroup = thisGroup.selectAll("g.label");
if(!labelGroup[0][0]){
  labelGroup = thisGroup.append("g").classed("label", true);
}

That should fix it I will go back and look at why it isn't.

[jrgleason]

I can confirm that I do not see the same issue on my version

Even when I rerender I don't see them added. You might try to make sure that you are on my FIX_SCALE_ISSUE branch.

[pragyesh15]

Hi @jrgleason , Sorry I had taken the wrong version. It is working now. I'll update you once I get any issue.

[Tobulus]

Thanks for the pull request, had the same issue which is now working

[balazs-zsoldos]

+1

[antonfefilov]

My five cents: in v0.4.11 HTML labels scales, but in the latest 0.4.17 they don't .

[spanic]

Dear @jrgleason, thank you for your work! :+1: This issue is still actual, so I used Jackie's commits to fix it in the latest dagre-d3 version (0.6.1), here's the code: https://yadi.sk/d/ycPRBec-3VtVBn

[dggriffin]

This is still an issue.