展示效果
第一次加载只要有节点数据和连线数据，保存的时候会生成坐标数据 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>