TreeLayout.AlignmentCenterChildren

Hi am having start and end node with two nodes in between. If i add second add and connect it from start it will automatically align the start in center to the below childs. then, if is link the second node with the end it should move to the center with respective to the parent. attached an image for further reference.gojs_treelayout_alignment

I’m not following what you are saying. Are you asking about how to have the “Enjoy!” node be centered below the two nodes that connect with it?

If so, please recognize that your graph is not tree-structured, so it should not be surprising that TreeLayout does not do what you want. In fact, in your screenshot, you can see that the “Enjoy!” node is indeed centered below its one parent node.

Perhaps you want to use LayeredDigraphLayout?

Hi Walter,
Thanks for the reply, What you understood is what I was about to ask. I have changed the TreeLayout to LayeredDiagraphLayout but I have seen a small alignment problem when I have the same set of a diagram like the previous one(attached image for the reference). It’s not center align it’s somewhat aligned to the left. How to get rid of this.

Thanks in advance.layereddigraphlayout

It’s hard for me to tell if you don’t say how you are calling it.

I’ll guess that you should decrease the value of LayeredDigraphLayout.columnSpacing, perhaps to 5. Caution: the smaller you set this, the slower it runs.

Hi Walter,
Am just adding all the nodes from my palette and connecting it something similar to the above image. Nothing to do with the code. But it doesn’t get connect in the middle it is somewhat left aligned and this is happening only for even number of child’s.

$(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
    {
      "undoManager.isEnabled": false,
	  allowDrop:true,
	  hasHorizontalScrollbar:false,
	  hasVerticalScrollbar:false,
	  initialAutoScale: go.Diagram.UniformToFill,
		layout:$(go.LayeredDigraphLayout,{angle: 90,
            layerSpacing: 35,columnSpacing:5})
    });

With LayeredDigraphLayout you cannot have precise control over the relative positioning of the nodes. It depends on the columnSpacing and the sizes of the individual nodes. It would help if your nodes all had widths that were multiples of the columnSpacing. But it’s apparent that your nodes all have different widths depending on the text.