Double Tree Diagram

GoJS
1

I am trying to create a following diagram very much similar to the following. Can any one please help me by guiding how to make it using GoJs and also how can we show all the child nods in a horizontal line. In case any more details required let me know.

@Reema: Can you please help by sharing your experience.

image
image1596×676 170 KB

2

Have you seen these samples?

  • Double Tree (simple sample that uses the DoubleTreeLayout extension)
  • Mind Map (supports partial layouts and changing the direction of a subtree, as well as changing the font of a node)
3

Double Tree exactly matches exactly to my requirement all I need is to change the alignment to TreeLayout.AlignmentBottomRightBus. But I am not sure how to incorporate that in my sample double tree code, tried all combination nothing is working. Kindly check my following code.
In case any more details required please let me know.

  myDiagram =
    $(go.Diagram, "myDiagramDiv",
      {
        layout: $(DoubleTreeLayout,
          {
            directionFunction: n => n.data && n.data.dir !== "left",
            topLeftOptions: {alignment: go.TreeLayout.AlignmentBottomRightBus},
            bottomRightOptions: {alignment: go.TreeLayout.AlignmentBottomRightBus},
            
          })
      });
4

What you have there looks perfectly reasonable, but you won’t get the layout that you show in your screenshot. Try removing the setting of alignment in both options objects.

5

What changes I need to do in order to achieve the layout shown in the screenshot?

6

Just what I said – don’t set alignment to AlignmentBottomRightBus.

            layout:
              $(DoubleTreeLayout,
                {
                  directionFunction: n => n.data && n.data.dir !== "left",
                  topLeftOptions: {},
                  bottomRightOptions: {},
                })