<script src="https://gojs.net/latest/release/go.js"></script>
<body>
<div id="myDiagramDiv" style="border: solid 1px black; width:300px; height:300px"></div>
<button onclick="replaceDiagram()">Replace Diagram</button>
<p><a href="https://gojs.net"/>gojs.net<a/></p>
</body>
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center,
"undoManager.isEnabled": true
}
);
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, { fill: "lightgray" }),
$(go.TextBlock,
{ margin: 8 },
new go.Binding("text", "key")
)
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: "Alpha"},
{ key: "Beta" },
{ key: "Gamma" }
],
[
{ from: "Alpha", to: "Beta" }
]
);
}
function replaceDiagram() {
var $ = go.GraphObject.make;
myDiagram.div = null;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center,
"undoManager.isEnabled": true
}
);
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, { fill: "lightblue" }),
$(go.TextBlock,
{ margin: 8 },
new go.Binding("text", "key")
)
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: "Delta"},
{ key: "Epsilon" },
{ key: "Omega" }
],
[
{ from: "Epsilon", to: "Omega" }
]
);
}
init();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.