CODEWITHSUNDEEP
javascriptgojs
Johnny
Johnny

Reputation: 41

loading go.js diagram from JSON file with node locations

I have succesfully saved the location of the nodes in a json file by adding this line to the nodeTemplate part of the code:

myDiagram.nodeTemplate = $(go.Node, "Auto", new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),

The json file looks like this:

"{ \"class\": \"GraphLinksModel\",\n \"nodeDataArray\": [ \n{\"text\":\"Node\", \"color\":\"white\", \"key\":-1, \"loc\":\"-105 -107\"},\n{\"text\":\"Node\", \"color\":\"white\", \"key\":-2, \"loc\":\"64.52284749830794 277\"},\n{\"text\":\"Node\", \"color\":\"white\", \"key\":-3, \"loc\":\"161.04569499661588 0\"},\n{\"text\":\"Node\", \"color\":\"white\", \"key\":-4, \"loc\":\"0 70\"},\n{\"text\":\"Node\", \"color\":\"white\", \"key\":-5, \"loc\":\"80.52284749830794 70\"},\n{\"text\":\"Node\", \"color\":\"white\", \"key\":-6, \"loc\":\"161.04569499661588 70\"},\n{\"text\":\"Node\", \"color\":\"white\", \"key\":-7, \"loc\":\"0 140\"},\n{\"text\":\"Node\", \"color\":\"white\", \"key\":-8, \"loc\":\"-166.47715250169205 182.99999999999997\"},\n{\"text\":\"Node\", \"color\":\"white\", \"key\":-9, \"loc\":\"161.04569499661588 140\"}\n ],\n \"linkDataArray\": [ \n{\"from\":-4, \"to\":-8},\n{\"from\":-7, \"to\":-5},\n{\"from\":-1, \"to\":-4},\n{\"from\":-2, \"to\":-5},\n{\"from\":-6, \"to\":-6},\n{\"from\":-6, \"to\":-9},\n{\"from\":-3, \"to\":-5}\n ]}"

However, when I try loading the diagram from the Json file, the nodes’ layout is reorganized. I’m using the basic diagram sample for the code. I tried changing the diagram initialization to:

$(go.Diagram, "myDiagramDiv", // create a Diagram for the DIV HTML element { layout: $(go.GridLayout, { isInitial: false, isOngoing: false }),...

but it doesn’t show the diagram. If I leave only iOnGoing=false, it shows but with the nodes in a straight line.

What am I doing wrong if I want to keep the nodes in the position when I saved the diagram to a json file?

Upvotes: 1

Views: 595

Answers (1)

Johnny
Johnny

Reputation: 41

I solved it by writing: myDiagram.nodeTemplate = $(go.Node, "Auto", { locationSpot: go.Spot.Center }, new go.Binding("position", "pos", go.Point.parse).makeTwoWay(go.Point.stringify),... instead of myDiagram.nodeTemplate = $(go.Node, "Auto", new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), (notice the change from “location” and “loc” to “position” and “pos”). That solved the problem.

No changes in the diagram initialization are needed

Upvotes: 1

Related Questions