gojs 坐标定位

展示效果

第一次加载只要有节点数据和连线数据，保存的时候会生成坐标数据 loc字段，

html 代码

<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:400px"></div>

<div id="buttons">
  <button id="loadModel" onclick="load()">Load</button>
  <button id="saveModel" onclick="save()">Save</button>
</div>
<textarea id="mySavedModel" style="width:100%;height:240px">

</textarea>

js 代码

 <script src="go.js"></script>
	<script>
	 init()
	
	  // 加载
	  function load() {
     
	    myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
	  }
	
	  // 保存
	  function save() {
     
	    document.getElementById("mySavedModel").value = myDiagram.model.toJson();
	    myDiagram.isModified = false;
	  }
	
	  function init() {
     
	
	    var $ = go.GraphObject.make;  // for conciseness in defining templates
	
	    myDiagram =
	      $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
	        {
     
	          // allow double-click in background to create a new node
	          "clickCreatingTool.archetypeNodeData": {
      text: "Node", color: "white" },
	
	          // allow Ctrl-G to call groupSelection()
	          "commandHandler.archetypeGroupData": {
      text: "Group", isGroup: true, color: "blue" },
	
	          // enable undo & redo
	          "undoManager.isEnabled": true,
	        });
	
	    // Define the appearance and behavior for Nodes:
	
	
	    function nodeInfo(d) {
       // Tooltip info for a node data object
	      var str = "Node " + d.key + ": " + d.text + "\n";
	      if (d.group)
	        str += "member of " + d.group;
	      else
	        str += "top-level node";
	      return str;
	    }
	
	    // These nodes have text surrounded by a rounded rectangle
	    // whose fill color is bound to the node data.
	    // The user can drag a node by dragging its TextBlock label.
	    // Dragging from the Shape will start drawing a new link.
	    myDiagram.nodeTemplate =
	      $(go.Node, "Auto",
	        {
      locationSpot: go.Spot.Center },
	        $(go.Shape, "RoundedRectangle",
	          {
     
	            fill: "white", // the default fill, if there is no data bound value
	            portId: "", cursor: "pointer",  // the Shape is the port, not the whole Node
	            // allow all kinds of links from and to this port
	            fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
	            toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true
	          },
	          new go.Binding("fill", "color")),
	        $(go.TextBlock,
	          {
     
	            font: "bold 14px sans-serif",
	            stroke: '#333',
	            margin: 6,  // make some extra space for the shape around the text
	            isMultiline: false,  // don't allow newlines in text
	            editable: true  // allow in-place editing by user
	          },
	          new go.Binding("text", "text").makeTwoWay()),  // the label shows the node data's text
	        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
	      );
	
	    // The link shape and arrowhead have their stroke brush data bound to the "color" property
	    myDiagram.linkTemplate =
	      $(go.Link,
	        {
      toShortLength: 3, relinkableFrom: true, relinkableTo: true },  // allow the user to relink existing links
	        $(go.Shape,
	          {
      strokeWidth: 2 },
	          new go.Binding("stroke", "color"),
	          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),),
	
	        $(go.Shape,
	          {
      toArrow: "Standard", stroke: null },
	          new go.Binding("fill", "color"))
	      );
	
	
	
	    myDiagram.groupTemplate =
	      $(go.Group, "Vertical",
	        {
     
	          selectionObjectName: "PANEL",
	          ungroupable: true
	        },
	        $(go.TextBlock,
	          {
     
	            //alignment: go.Spot.Right,
	            font: "bold 19px sans-serif",
	            isMultiline: false,  // don't allow newlines in text
	            editable: true  // allow in-place editing by user
	          },
	          new go.Binding("text", "text").makeTwoWay(),
	          new go.Binding("stroke", "color")),
	        $(go.Panel, "Auto",
	          {
      name: "PANEL" },
	          $(go.Shape, "Rectangle",  // the rectangular shape around the members
	            {
     
	              fill: "rgba(128,128,128,0.2)", stroke: "gray", strokeWidth: 3,
	              portId: "", cursor: "pointer",  // the Shape is the port, not the whole Node
	              // allow all kinds of links from and to this port
	              fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
	              toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true
	            }),
	          $(go.Placeholder, {
      margin: 10, background: "transparent" })  // represents where the members are
	        ),
	      );
	
	    // 节点数据
	    var nodeDataArray = [
	      {
      key: 1, text: "Alpha", color: "lightblue" },
	      {
      key: 2, text: "Beta", color: "orange" },
	      {
      key: 3, text: "Gamma", color: "lightgreen", group: 5 },
	      {
      key: 4, text: "Delta", color: "pink", group: 5 },
	      {
      key: 5, text: "Epsilon", color: "green", isGroup: true }
	    ];
	
	    // 连线
	    var linkDataArray = [
	      {
      from: 1, to: 2, color: "blue" },
	      {
      from: 2, to: 2 },
	      {
      from: 3, to: 4, color: "green" },
	      {
      from: 3, to: 1, color: "purple" }
	    ];
	
	
	    myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
	  }
</script>