Centering Child Nodes sharing Multiple Parents

I can’t figure out why a child node sits underneath the top or left most parent, and does not automatically center itself under the middle parent. My json looks like this:

var nodeDataArray = [
    { key: "MARYLAND INDUSTRY", geo: "file"},
 	{ key: "CHESTFIELD HOLDING", geo: "file"},
 	{ key: "FARMER HOLDING", geo: "file" },
 	{ key: "HEETON HOLDING", geo: "file"},
    { key: "FRUIT", geo: "file" },
 	{ key: "WHEAT", geo: "file" },
	{key: "LODGING", geo: "file"},
	{ key: "CHILD 1", geo: "file" },
	{ key: "CHILD 2", geo: "file" },
	{ key: "CHILD 3", geo: "file" },
	{ key: "CHILD 4", geo: "file" },
	{ key: "CHILD 5", geo: "file" },
 ];

 var linkDataArray = [
     { from: "MARYLAND INDUSTRY", to: "CHESTFIELD HOLDING", status: "complete" },
     { from: "MARYLAND INDUSTRY", to: "FARMER HOLDING", weight: "75%", status: "open" },
     { from: "MARYLAND INDUSTRY", to: "HEETON HOLDING", status: "open" },
	 { from: "MARYLAND INDUSTRY", to: "WHEAT", status: "open" },
	 { from: "FARMER HOLDING", to: "WHEAT", weight: "25%", status: "open" },
	 { from: "FARMER HOLDING", to: "FRUIT", weight: "25%", status: "open" },
	 { from: "FARMER HOLDING", to: "LODGING", weight: "25%", status: "open" },
	 {from: "CHESTFIELD HOLDING", to: "WHEAT",  weight: "46%", status: "complete"},
	 {from: "CHESTFIELD HOLDING", to: "FRUIT", weight: "46%", status: "open"},
	 {from: "CHESTFIELD HOLDING", to: "LODGING",  weight: "46%", status: "open"},
	 {from: "HEETON HOLDING", to: "WHEAT", weight: "45%", status: "open"},
	 {from: "HEETON HOLDING", to: "FRUIT", weight: "20%", status: "complete"},
	 {from: "HEETON HOLDING", to: "LODGING",  weight: "46%", status: "open"},
	 {from: "FRUIT", to: "CHILD 1"},
	 {from: "FRUIT", to: "CHILD 2"},
	 {from: "FRUIT", to: "CHILD 3"},
	 {from: "FRUIT", to: "CHILD 4"},
	 {from: "FRUIT", to: "CHILD 5"}
 ];

I want the 3rd depth of nodes (WHEAT, FRUIT, LODGING) to sit centered underneath the “FARMER HOLDING” node, not the far left “CHESTFIELD” node.

Thanks for the help.

Your graph is not tree-structured, so if you are using a Diagram.layout that is a TreeLayout, that can happen.

Try using a LayeredDigraphLayout.

Ok, thanks. I changed the layout as you said:

layout:
	$(go.LayeredDigraphLayout,
		{
			angle: 90,
                        layerSpacing: 35
		}),

Should that be all that I need to change? I am getting the same result.

The exact same result? That’s suspicious.

My bad, this looks great.

I’m playing around with use cases as if we decide to use Go.JS the graph will be used inside an Angular Component where we won’t know the exact nodes and edges be uses, and they will be much larger in count typically. Is there a way to keep it always centered in the middle of the graph so it doesn’t do this:

That can get really messy with a lot of nodes and edges running all over the place, is there a way to keep “MARYLAND INDUSTRY” centered and just have the link run behind the other nodes, rather then moving to the right?

Thanks

Also why would it pull “Child 1” to the right when connecting from “LODGING”. Why doesn’t it just keep the children in order and make a link from “LODGING” to “CHILD 1”?

Sorta. You can delcare some links to not participate in the layout by setting isLayoutPositioned: false and isTreeLink: false on them. This is what the “extra” links do in the org chart extras sample.

Also why would it pull “Child 1” to the right when connecting from “LODGING”.

Presumably because the layout is trying to minimize crossings and put children as close as possible to their parents.

Please consider making smaller screenshots, perhaps use the Snipping Tool, which is built into Windows.