Comments (8)
@DreamyBit please extend one of the examples with your issue reproduced and I could look into it on my free time
from org-chart.
@DreamyBit you have the possibility to specify different heights per node, so you have to check when and specify different node heights and width for this part, roughly in green box size
from org-chart.
@bumbeishvili Thanks for the reply, managed to progress but got some details that couldn't tackle on my own due to my understanding of the d3 code
I tried your suggestion and worked for the lines but now the expand/collapse button changed positions too to the bottom of the new dimensions (bottom center of the green line as per your image) There's a way to specify the position of the button manually?
And since I'm already asking about the button and to not create another question thread, can we force the expand/collapse button to appear even if there're no children? In order to give the illusion that the 'staff' node is just another child I managed to make the number in the button to show children + 1 but when there're no actual children I can't expand and thus can't see the staff section. For this I tried using the function
.buttonContent (( node, state ) => {}
returning something like:
return <div style="..."> ${icons[node.state?.layout]( newArrayWithChildrenPlusAuxNodeCreatedOnThisFunction)} </div>
But probably this is not the correct approach to force the button to appear since is not working.
Also related, while changing the height of a node via:
.onExpandOrCollapse ((d) => { d.height = ( hasStaffCondition) ? 450 : 170; })
it does not update the visuals (size, position of the button, lines to children) when the function is triggered and in order to see that the changes are correctly made I need to collapse and expand the parent of the node I'm working on. Can I trigger a re-render of the current node and its children on the 'onExpandOrCollapse' function?
from org-chart.
pressed the close button by mistake, sorry :<
from org-chart.
This has the 3 problems described, tried to trim as many code as I could, the helper functions at the start are to change and trim the data, the only important info there is that now the nodes have those variables that are used to represent the staff:
as was suggested on other question I asked.
For the first problem, Den (114)
has no children but has staff, since there's no visible expand button we cant see his staff (which is part of the parent, not a child)
The second and third problem are more tricky and go hand in hand, first, if we change the height
property of a node on the onExpandOrCollapse()
function is not reflected immediately, for example, if we expand the node of Matthew (120)
, we need to contract and expand its parent Steven (100)
in order to refresh the render of the node. If we do this we can see that height is changed correctly and the lines are now more aligned with the initial intent of this thread but now the button is all the way down while the desired behaviour is for it to stay atached to Matthew (120)
Adam (121)
is there for no particular reason, mostly as control while editing
Any guidance would be appreciated since I read the code at the repo twice but couldn't find where to alter the position of the expand/collapse button, thanks in advance @bumbeishvili
from org-chart.
I managed to create a work around for the button, but still need help with manually re-rendering one node (and its children) to adapt into the new dimensions (height and width)
from org-chart.
@DreamyBit: Is it possibel that you share a sample code from your Demo where you have implemented the "Staff" like in the screenshot above. I also search for such a solution to show "Staff" members. Would be great if you can share a sample code with the structured data which is used. Thanks a lot
from org-chart.
@elcustrinio at the start of the comment there's a stackblitz link with the code used for that screenshot, sadly has some problems as described. Over the weekend I can replicate and share what I did in order to make it work, albeit not perfectly since the 'staff' is not a node itself and just an extension of the parent node
from org-chart.
Related Issues (20)
- Download Org. chart has issue HOT 1
- Can the position of the root node not be centered? HOT 1
- Fit to screen not working in my example HOT 6
- 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
- Adjust specific nodes to a certain level HOT 4
- Node Coloring persisting when chart rerenders HOT 4
- Bidirectional Org Chart ( Two Layouts at a time ) HOT 8
- ERROR ReferenceError: document is not defined when using Angular v18.x 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.