One of the problems we are facing now is that the data added through the program will have the problem of node overlap after rendering.
Is there any plan to organize with one click?
Have you disabled automatic layouts? What is the value of your Diagram.layout?
TreeLayout
Your screenshot shows results that are quite different from the normal behavior. How have you modified the TreeLayout?
I used the location of TreeLayout.
There are three functions here:
- The parent node can be dragged to any position at will.
- The order of child nodes can be adjusted.
- The cards created by the code will overlap. Now you need to rearrange the positions of all parent nodes to ensure that they do not overlap (I don’t know any good way here).
Set DraggingTool.dragsTree to true so that dragging a node will also drag all of its tree children. See for example: Mind Map
Set TreeLayout.arrangement to go.TreeLayout.ArrangementFixedRoots so that when a layout happens, the root nodes will be left where they are and their subtrees will be laid out nicely. This is demonstrated by: Double Tree
That way the user can position the tree where they want, and adding/removing children will behave reasonably, but they can easily move subtrees to avoid overlaps.
I don’t understand the last function.
As you said, The first two functions have been implemented. But is there no good way to organize the last one?
Do a layout that doesn’t set TreeLayout.arrangement?
For example, just perform a transaction that sets that property.
myDiagram.commit(function(diag) {
diag.layout.arrangement = go.TreeLayout.ArrangementVertical;
});