How to build tree of items in Node?

I’m refer to this: GoJS Tree Mapper
But i’m trying to do same thing in Node. Is possible to do that?
please refer to picture below

Just use a Group. In fact the TreeMapper sample does exactly that – there are two Groups in that sample, one labeled “Left Side” and one labeled “Right Side”.

Hi Walter, i’ve update my diagram like GoJS Tree Mapper.
But i see an issue for Link self. Please see image below:

I found that when do resize box.
Here is my LinkData:

[{"from":"/root/Category","to":"/root/Category","fromText":"0.. n","toText":"0..1","label":"category","routing":"go.Link.AvoidsNodes","fromSpot":"1 0.001 0 20.0","toSpot":"0.999 0 -20.0 0","curviness":20,"points":""},{"from":"/root/Category","to":"/root/Category","fromText":"0.. n","toText":"2..n","label":"category","routing":"go.Link.AvoidsNodes","fromSpot":"1 0.001 0 40.0","toSpot":"0.999 0 -40.0 0","curviness":40,"points":""},{"from":"/root/Category","to":"/root/Category","fromText":"0.. n","toText":"1","label":"category","routing":"go.Link.AvoidsNodes","fromSpot":"1 0.001 0 60.0","toSpot":"0.999 0 -60.0 0","curviness":60,"points":""}]

Here is my group template:

$(go.Group, "Auto",
  {			
    layout:
      $(go.TreeLayout,
        {
          alignment: go.TreeLayout.AlignmentStart,
          layerSpacing: 15,
          layerSpacingParentOverlap: 1,
          nodeIndent: 2,
          nodeIndentPastParent: 0.88,
          nodeSpacing: 0,
          setsPortSpot: false,
          setsChildPortSpot: false,
			  arrangementSpacing: new go.Size(1, 1),				  
			  rowSpacing:0
        }),
        resizable: true, resizeObjectName: "SHAPE",
        selectionObjectName: "SHAPE1",
        locationObjectName: "SHAPE",
        fromSpot: go.Spot.AllSides,
  			toSpot: go.Spot.AllSides,
  			locationSpot: go.Spot.Center
  },
  new go.Binding("location", "location", function(locStringify){
		var obj = JSON.parse(locStringify); 
		
		return new go.Point(obj.x, obj.y);
	}).makeTwoWay(),
	$(go.Shape, "Rectangle", {fill: "white", stroke: "#4472C4", strokeWidth: 1 },
	          new go.Binding("desiredSize").makeTwoWay()),
	$(go.Panel, "Table", { name: "SHAPE1", stretch: go.GraphObject.Fill, defaultRowSeparatorStroke: "#4472C4" },
		//header
  			$(go.TextBlock,
  			{
  				row: 0,   				
  				margin: new go.Margin(2,2,2,2),
  				textAlign: "center",
  				alignment: go.Spot.Center,
  				verticalAlignment: go.Spot.Center,
  				font: "bold 16px Open Sans"
//  				desiredSize: new go.Size(210,22)
  			},
  			new go.Binding("text", "label")),
  			$(go.Panel,{name: "SHAPE",row:1,alignment: go.Spot.TopLeft},
  					new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
		 $(go.Placeholder, { padding: 7 })
    )

// )
)

);

Is this a bug? And How to fix this?

Thanks for advance

I cannot tell what you have there. Is your “Category” node a Group? Do those three links connect with that group, and not with any member node within that group? Does your group only have a single port, which is the whole group? Are you using the go-debug.js library and are there any warnings or errors in the debug/console window?

Yes, “Category” is Group. And three Links only connect with that group.
Does your group only have a single port?
Sorry i don’t understand this question.Currently I’m using fromSpot and toSpot to locate the link.
here is my link Template
$(go.Link, // the whole link panel { selectionAdorned: false, layerName: "Foreground", reshapable: false, // routing: go.Link.AvoidsNodes, // corner: 5, // curve: go.Link.Bezier, }, new go.Binding("fromSpot", "fromSpot", function(t){ return new go.Spot.parse(t);}), new go.Binding("toSpot", "toSpot", function(t){ return new go.Spot.parse(t);}), new go.Binding("curviness", "curviness"), new go.Binding("routing", "routing", function(t){ if(t === "go.Link.AvoidsNodes"){ return go.Link.AvoidsNodes; } if(t === "go.Link.Orthogonal"){ return go.Link.Orthogonal; } }), $(go.Shape,{stroke: linkColour, strokeWidth: 2}), $(go.Shape, // the link shape { stroke: linkColour, strokeWidth: 2, toArrow: "OpenTriangle", fill: linkColour }), $(go.TextBlock, // the "from" label { textAlign: "center", font: "bold 14px Open Sans", stroke: "black", segmentIndex: 0, segmentOffset: new go.Point(NaN, NaN), segmentOrientation: go.Link.OrientUpright }, new go.Binding("text", "fromText") ), $(go.TextBlock, // the "to" label { textAlign: "center", font: "bold 14px Open Sans", stroke: "black", segmentIndex: -1, segmentOffset: new go.Point(NaN, NaN), segmentOrientation: go.Link.OrientUpright }, new go.Binding("text", "toText") ), { toolTip: // define a tooltip for each node that displays the color as text $(go.Adornment, "Auto", $(go.Shape, { fill: "#FFFFCC" }), $(go.TextBlock, { margin: 4 }, new go.Binding("text", "label")) ) // end of Adornment } );

There are no warning or log when resizing box. But when i call init function i got this:

Binding error: SyntaxError: Unexpected token P in JSON at position 0 setting target property "location" on     Group#596(/root/Brand) with conversion function: function (locStringify){
        			var obj = JSON.parse(locStringify); 
    			
    			return new go.Point(obj.x, obj.y);
    		}
go-debug.js?0012:35 Binding error: SyntaxError: Unexpected token P in JSON at position 0 setting target property "location" on Group#671(/root/Category) with conversion function: function (locStringify){
    			var obj = JSON.parse(locStringify); 
    			
    			return new go.Point(obj.x, obj.y);
    		}
go-debug.js?0012:35 Binding error: SyntaxError: Unexpected token P in JSON at position 0 setting target property "location" on Group#743(/root/Inventory) with conversion function: function (locStringify){
    			var obj = JSON.parse(locStringify); 
    			
    			return new go.Point(obj.x, obj.y);
    		}
go-debug.js?0012:35 Binding error: SyntaxError: Unexpected token P in JSON at position 0 setting target property "location" on Group#807(/root/Item) with conversion function: function (locStringify){
    			var obj = JSON.parse(locStringify); 
    			
    			return new go.Point(obj.x, obj.y);
    		}
go-debug.js?0012:35 Binding error: SyntaxError: Unexpected token P in JSON at position 0 setting target property "location" on Group#887(/root/Store) with conversion function: function (locStringify){
    			var obj = JSON.parse(locStringify); 
    			
    			return new go.Point(obj.x, obj.y);
    		}
go-debug.js?0012:35 Binding error: SyntaxError: Unexpected token P in JSON at position 0 setting target property "location" on Group#596(/root/Brand) with conversion function: function (locStringify){
    			var obj = JSON.parse(locStringify); 
    			
    			return new go.Point(obj.x, obj.y);
    		}
go-debug.js?0012:35 Binding error: SyntaxError: Unexpected token P in JSON at position 0 setting target property "location" on Group#671(/root/Category) with conversion function: function (locStringify){
    			var obj = JSON.parse(locStringify); 
    			
    			return new go.Point(obj.x, obj.y);
    		}
go-debug.js?0012:35 Binding error: SyntaxError: Unexpected token P in JSON at position 0 setting target property "location" on Group#743(/root/Inventory) with conversion function: function (locStringify){
    			var obj = JSON.parse(locStringify); 
    			
    			return new go.Point(obj.x, obj.y);
    		}
go-debug.js?0012:35 Binding error: SyntaxError: Unexpected token P in JSON at position 0 setting target property "location" on Group#807(/root/Item) with conversion function: function (locStringify){
    			var obj = JSON.parse(locStringify); 
    			
    			return new go.Point(obj.x, obj.y);
    		}
go-debug.js?0012:35 Binding error: SyntaxError: Unexpected token P in JSON at position 0 setting target property "location" on Group#887(/root/Store) with conversion function: function (locStringify){
    			var obj = JSON.parse(locStringify); 
    			
    			return new go.Point(obj.x, obj.y);
    		}

Well, I don’t know what syntax you are trying to support for location values, but I think you really ought to fix that error first.

Yes, that’s log display because the binding makeTwoWay for Location then i’m fixed this.Now the console is clean, no warning or error… But the issue about linkself still occurs. Do you have any idea?

here is my fiddle: https://jsfiddle.net/tiepna/c85met86/10/

Thanks for reporting this bug. This will be fixed in the 1.7.15 release, which should come out in a week or so (this weekend is a long holiday).

Could you try 1.7.15 beta, located at GoJS - Build Interactive Diagrams for the Web ?

Thanks! It’s working.