<script src="https://gojs.net/latest/release/go.js"></script>
<body>
<div id="myDiagramDiv" style="border: solid 3px red; width:300px; height:300px"></div>
<p><a href="https://gojs.net"/>gojs.net<a/></p>
</body>
function init() {
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
var graph = go.GraphObject.make; // for conciseness in defining templates
myDiagram = graph(go.Diagram, "myDiagramDiv", // create a Diagram for the DIV HTML element
{
initialContentAlignment: go.Spot.Center, // center the content
"undoManager.isEnabled": true,
"ChangedSelection": onSelectionChanged,
});
// define a simple Node template
myDiagram.nodeTemplate =
graph(go.Node, "Auto", // the Shape will go around the TextBlock
graph(go.Shape, "RoundedRectangle",
// Shape.fill is bound to Node.data.color
new go.Binding("fill", "color")),
graph(go.TextBlock,
{ margin: 3 }, // some room around the text
// TextBlock.text is bound to Node.data.key
new go.Binding("text", "key"))
);
myDiagram.linkTemplate =
graph(go.Link,
{ curve: go.Link.Bezier, toShortLength: 5 },
{layerName: "Background"},
graph(go.Shape,
new go.Binding("stroke", "isHighlighted", function(h) {return h ? "#388E3C" : "#009BE1"; })
.ofObject()),
graph(go.Shape, { toArrow: "Standard" },
new go.Binding("stroke", "isHighlighted", function(h) { return h ? "#388E3C" : "#009BE1"; })
.ofObject()),
graph(go.TextBlock, "test",
{font: "13px sans-serif", stroke: "black"},
//key binds to the "key" property in the json
new go.Binding("text", "isHighlighted", function (h, obj) {
return h ? obj.part.data.from : ""
}).ofObject())
);
// highlight all Links and Nodes coming out of a given Node
function onSelectionChanged() {
myDiagram.startTransaction("highlight");
// remove any previous highlighting
myDiagram.clearHighlighteds();
myDiagram.links.each(function(l) {
// If both from and to node are selected, highlight the link
if (l.fromNode.isSelected && l.toNode.isSelected) l.isHighlighted = true;
});
myDiagram.commitTransaction("highlight");
}
// when the user clicks on the background of the Diagram, remove all highlighting
myDiagram.click = function(e) {
myDiagram.startTransaction("no highlighteds");
myDiagram.clearHighlighteds();
myDiagram.commitTransaction("no highlighteds");
};
// create the model data that will be represented by Nodes and Links
myDiagram.model = new go.GraphLinksModel(
[
{ key: "Alpha", color: "lightblue" },
{ key: "Beta", color: "orange" },
{ key: "Gamma", color: "lightgreen" },
{ key: "Delta", color: "pink" }
],
[
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Gamma" },
{ from: "Beta", to: "Beta" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha" }
]);
}
init();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.