In the last lesson, we have basically mastered how to use the gojs library to draw a simple relationship diagram on the browser. The specific code is as follows:
1 <!doctype html> 2 <html> 3 <head> 4 <script src="https://unpkg.com/gojs/release/go.js"></script> 5 <script> 6 function init() { 7 var $ = go.GraphObject.make; 8 myDiagram = $(go.Diagram, "myDiagramDiv"); 9 var nodeDataArray = [ 10 { key: "Alpha"}, 11 { key: "Beta" }, 12 13 { key: "Delta"}, 14 { key: "Gamma" } 15 ]; 16 var linkDataArray = [ 17 { to: "Beta", from: "Alpha" }, 18 { to: "Delta", from: "Alpha" }, 19 { to: "Gamma", from: "Alpha" } 20 ]; 21 myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray); 22 23 24 } 25 </script> 26 </head> 27 <body onload="init()"> 28 <div id="myDiagramDiv" style="width:700px; height:150px"></div> 29 </body> 30 </html>
The relationship diagram corresponding to this code is as follows:
The nodes of the above relationship graph are too simple. If we want to get a more beautiful relationship graph, for example, what should we do? At this time, you need to use the template provided by gojs (template), the template is equivalent to the container holding the node, you can specify the shape of this container, fill color and so on.
To realize the above beautified relationship diagram, only the following two changes need to be made based on the original code:
1 var nodeDataArray = [ 2 { key: "Alpha", color: "lime"}, 3 { key: "Beta",color: "cyan" }, 4 5 { key: "Delta",color: "pink"}, 6 { key: "Gamma" ,color: "maroon"} 7 ];
The first change is to add a color attribute to each object element in the nodeDataArray array to specify the color of the node.
1 myDiagram.nodeTemplate = 2 $(go.Node, "Auto", 3 $(go.Shape, "RoundedRectangle",
4 new go.Binding("fill", "color") 5 ), 6 $(go.TextBlock,
7 new go.Binding("text", "key") 8 ) 9 );
The second change is to copy the nodeTemplate attribute of the container that holds each node in the view myDiagram. The constructor that assigns the container can receive multiple parameters. The first parameter is the type parameter, here is go.Node, indicating that it needs to be changed The style of the node. The second parameter is the layout inside the container, here is "Auto", which means that this container contains at least two elements, the first element will wrap the other elements in the container. The third parameter is go.Shape, which represents the first element in the container. Here we specify that its shape is a rounded rectangle, namely "RoundedRectangle", new go.Binding ("fill", "color") It is used to set the fill color of each node container. Creating a new go.Binding data binding object through the new keyword allows us to bind the fill color property of the container to the color property of each node object in nodeDataArray. Make each node container present the internal fill color we specified. The fourth parameter is go.TextBlock, which is a text box. The phrase new go.Binding ("text", "key") is used to bind the text in the text box to the key value of each node in nodeDataArray. Due to the setting of the auto attribute, the text box is wrapped in a rounded rectangle.
In addition to changing the appearance of each node in the container, we can also use a similar method to adjust the style of the edge by assigning a value to the linkTemplate property responsible for managing the edge in the view myDiagram. It also requires only the original code Based on the following two changes:
1 var linkDataArray = [ 2 { to: "Beta", from: "Alpha",color: "red" }, 3 { to: "Delta", from: "Alpha" }, 4 { to: "Gamma", from: "Alpha" } 5 ];
The above code adds a color property to each edge object property of linkDataArray and sets its value to "red".
1 myDiagram.linkTemplate = 2 $(go.Link, 3 $(go.Shape, { strokeWidth: 3 }, 4 new go.Binding("stroke", "color")), 5 $(go.Shape, 6 { toArrow: "Standard", stroke: null }, 7 new go.Binding("fill", "color")) 8 );
The second change is to copy the linkTemplate property in the view myDiagram. The constructor that assigns the container can receive multiple parameters. The first parameter is the type parameter, here is go.Link, which is used to change the connection (edge) style. The second parameter is the shape parameter go.Shape, which represents the style of the side. Here we specify the thickness of the side as 3. New go.Binding ("stroke", "color") is used to set the color of the side , Create a new go.Binding data binding object through the new keyword allows us to bind the edge color property stroke and the color property of each edge object in the linkDataArray, so that the edges between the nodes appear as we specified in linkDataArray s color. The third parameter is the shape parameter go.Shape, which represents the style of the arrow, toArrow: "Standard" means to add an arrow to the end of the edge, stroke: null means a hollow arrow; new go.Binding ("fill", "color") This sentence is used to set the color of the arrow. Creating a new go.Binding data binding object through the new keyword allows us to bind the arrow color property fill and the color property of each edge object in linkDataArray To make the arrow show the color we specified in linkDataArray.
The complete code to achieve the above picture is as follows:
1 <!doctype html> 2 <html> 3 <head> 4 <script src="https://unpkg.com/gojs/release/go.js"></script> 5 <script> 6 function init() { 7 var $ = go.GraphObject.make; 8 myDiagram = $(go.Diagram, "myDiagramDiv"); 9 var nodeDataArray = [ 10 { key: "Alpha", color: "lime"}, 11 { key: "Beta",color: "cyan" }, 12 13 { key: "Delta",color: "pink"}, 14 { key: "Gamma" ,color: "maroon"} 15 ]; 17[ =linkDataArrayvar16 { to: "Beta", from: "Alpha",color: "red" }, 18 { to: "Delta", from: "Alpha" }, 19 { to: "Gamma", from: "Alpha" } 20 ]; 21 myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray); 22 myDiagram.nodeTemplate = 23 $(go.Node, "Auto", 24 $(go.Shape, "RoundedRectangle", 25 new go.Binding("fill", "color") 26 ), 27 $(go.TextBlock, 28 new go.Binding("text", "key") 29 ) 30 ); 31 myDiagram.linkTemplate = 32 $(go.Link, 33 $(go.Shape, { strokeWidth: 3 }, 34 new go.Binding("stroke", "color")), 35 $(go.Shape, 36 { toArrow: "Standard", stroke: null }, 37 new go.Binding("fill", "color")) 38 ); 39 40 41 } 42 </script> 43 </head> 44 <body onload="init()"> 45 <div id="myDiagramDiv" style="width:700px; height:150px"></div> 46 </body> 47 </html>
What if you want to group nodes? For example, the two nodes Delta and Gamma above want to group them into "GroupB", and then point the node Alpha to GroupB. To implement this grouping function, you only need to make the following modifications to nodeDataArray and linkDataArray.
var nodeDataArray = [ { key: "Alpha", color: "lime"}, { key: "Beta",color: "cyan" }, { key: "GroupB", isGroup: true}, { key: "Delta", color: "pink", group: "GroupB"}, { key: "Gamma" ,color: "maroon", group: "GroupB"} ]; var linkDataArray = [ { to: "Beta", from: "Alpha",color: "red" }, { to: "GroupB", from: "Alpha" }
The final effect is shown below:
