Custom Link and/or link height

[DreamyBit]

Helloo, currently I'm trying to change the height (regarding the distance between parent node and sons) of which the lines bend. Currently I have this:

And would like to know how can I specify the height of the 'bend' so that I can achieve something like this:

Since currently the lines bend right on the middle of the distance between parent and son and so they appear behind the 'staff' node. thanks in advance, any help is appreciated

[bumbeishvili]

@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

[DreamyBit]

@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?

[DreamyBit]

pressed the close button by mistake, sorry :<

[bumbeishvili]

@DreamyBit please extend one of the examples with your issue reproduced and I could look into it on my free time

[DreamyBit]

stackblitz link

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

[DreamyBit]

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)

[elcustrinio]

@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

[DreamyBit]

@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

[mtimit]

@DreamyBit i would also like to see how you managed to work around this :100: