Fit to screen not working in my example

[aafarian]

Not sure why, but when i try to implement the "fit" feature, it's not working. i'm getting Unexpected value translate(NaN,NaN) scale(NaN) parsing transform attribute.

Has anyone ran into this? What's the best way to troubleshoot/fix this issue?

EDIT: Browser details - I'm using FireFox 126.0 (64-bit)

[bumbeishvili]

@aafarian can you provide a reproduced sample? also video recording would be helpful

You can fork and extend this sample - https://stackblitz.com/edit/js-q8n1mh?file=index.html

[aafarian]

i can try to do that sometime soon. until then, there's also another issue because i just wrote the logic in my code manually to "fit to screen". it seems like if i expand the nodes, and then try to fit to screen, the chart sticks to the left/bottom left. you can actually reproduce this in the stackblitz link you sent me. is that intended/known?

EDIT: right now, the issue i'm working through is the chart seems to center properly if i move it and then click on "fit", but once i click on the "expand all" button i put on it, clicking on fit makes it zoom out and go to the bottom left of the screen. other than that, it seems to work as intended with my manually coded "handleFit" function since the .fit is having issues. might be a Firefox issue?

[aafarian]

here is the behavior, and i'm showing you the logs for the initial chart render, a log at the start of the handleFit function, and one at the end after the fit is done. in this case, even the initial render had lastTransform: Object { k: NaN, x: NaN, y: NaN }, but there are times where the initial render will have lastTransform: Object { x: 0, y: 0, k: 0.5 } (however, the handleFit will still have the NaN issue)

this is using the d3-org-chart .fit({ animate: true }), i stopped trying to implement my own solution because there were too many discrepancies between my transform/zoom state and the transform/zoom state in d3-org-chart.

Screen.Recording.2024-05-16.at.1.12.31.PM.mov

[aafarian]

here's a video of me not even moving it and just clicking on "fit":

Screen.Recording.2024-05-16.at.1.35.58.PM.mov

[aafarian]

I found the issue! it seemed to be my .svgHeight(() => 800) line. if i comment that out, it all seems to work perfectly! it seems like manually altering the svg height seemed to break the logic

[bumbeishvili]

@aafarian .svgHeight(() => 800) this is not correct, it just receives the number, so it should be .svgHeight(800)