Display of results
As long as there is node data and connection data for the first load, the coordinate data loc field will be generated when it is saved.
html code
<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 code
<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>