Comments (6)
@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
from org-chart.
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?
from org-chart.
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
from org-chart.
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
from org-chart.
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
from org-chart.
@aafarian .svgHeight(() => 800)
this is not correct, it just receives the number, so it should be .svgHeight(800)
from org-chart.
Related Issues (20)
- Can I have menu option having multiple items on right side of each node? HOT 2
- Is there a way to edit the position of a node in the chart? HOT 3
- How can I read which nodes are expanded? HOT 2
- The hidden time of the connecting line is incorrect HOT 5
- Download Org. chart has issue HOT 1
- Can the position of the root node not be centered? HOT 1
- Searched node doesn't come at center on the very first time. What is the significance of _centered? HOT 1
- Is there a way to add customisable right click menu on nodes? HOT 2
- getChartState does not update the _expanded/children property correctly when a collapse button is clicked HOT 3
- How can I customize the position of child nodes? HOT 3
- The folding/folding function causes the image within the node to flash HOT 7
- Vite (using ESBuild) fails with 'Cannot use import statement outside a module' HOT 1
- nodeButtonWidth is not a function, same for Height, nodeButtonX and Y. HOT 2
- implement d3.interpolateZoom on node click
- onNodeClick Safari - Activates on clicking expand nodes HOT 1
- Disable expand if number of nodes are higher than a specific value HOT 3
- Facing the issue "TypeError: linkUpdate.transition is not a function at OrgChart.update (d3-org-chart.js:703:14)"
- How can I keep font family when export image or pdf file? HOT 1
- SVG height not updating on resize? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from org-chart.