Gojs_ Easy to use

Simple to use

Everything is based on reference content: official documentation, Nuggets – GoJS base drawings, Vue + GoJS fishbone drawings

In JsRun, we put simple cases, and try to deepen our understanding while looking at them

go 是 GoJsKeep thenamespace, all Gojs classes use this prefix

0. Use the online library directly<script src="https://unpkg.com/gojs/release/go-debug.js"></script>

1. Similar to canvas use, need to specify an HTMLdivAs a canvas (area size should be clearly displayed)

   <div id="myDiagramDiv" style="width:400px; height:150px; background-color: #DAE4E4;" ></div>

2. throughidSpecify the corresponding canvas to create an empty chart.

   Var $= go.graphobject.make; var $= go.graphobject.make; var $= go. // $(go.diagram, container ID, {config}) var myDiagram = $(go.diagram, "myDiagramDiv");Copy the code

   Gojs ismodel-viewThe structure, the view ismadelVisual representation of data, using only the data object Settings, such as:

   var $ = go.GraphObject.make; Var myDiagram = $(go.Diagram, "myDiagramDiv", {// enable undoManager, ctrl-z and ctrl-y will undo "undomanager.isenabled ": true}); MyDiagram.Model = new go.model ({key: "Alpha"}, {key: "Beta"}, {key: "Gamma"}]); // The default node template, with the modle key property bound to TextBlock text; The default value is text, then key. myDiagram.nodeTemplate = $(go.Node, $(go.TextBlock, new go.Binding("text", "key")) );Copy the code

3. Set the Node Node styleextension

   Set using nodeTemplate or nodeTemplateMap.

   • Diagram object. NodeTemplate = $(go.node,...)
   • Nodetemplatemap. add(template name,$(go.node,...)) )Different styles apply to different nodes

   MyDiagram. NodeTemplate = $(go.node, // alignment, apply to the elements in the function area, can be annotated to feel the same. "Horizontal", $(go.Panel, "Horizontal", { background: 'gray', margin: 10, width: 50, height: 50 }, $(go.TextBlock, { stroke: '#fff' }, new go.Binding("text", "key")) ), $(go.TextBlock, { stroke: 'blue' }, new go.Binding("text", "key")) );Copy the code

   ---

   In order to reduce the writing of the explanatory position, the content | represents the corresponding content as an unfilled item. We’ll use $(…) a lot later. Writing, writing is usually $(go. Object, or type |, {} configuration items | and | binding data, $(…). ).

   $= go.graphobject. make; $= go.graphobject. make;

   Binding data, through the new go. Binding (outer go of properties on the object, the data in the corresponding field name |, Func |) data conversion method, properties and field name is consistent, can not write

   Func: (value)=>{} value indicates the value of the field name in the data.

   Default value $(go) TextBlock, |,…). The default value is displayed if there is no binding data or if the corresponding key of the binding does not exist (key is different and will have a value even if it is not set).

   Node supports Shape, TextBlock, Picture, Panel container.

4. Link to the node

   In many cases, we want to show the structure relationship of the corresponding node by linking the node, at which time we can chooseGraphLinksModel 或 TreeModel 。

   • Diagram object. Model = new go.graphLinksModel ([array of nodes],[array of links]);
   • Model = new go.treemodel ([array of nodes with parent specified]);

   MyDiagram. Model = new go.graphlinksModel ([{key: "A"}, {key: "B" }, { key: "C" }, { key: "D" } ], [ { from: "A", to: "B" }, { from: "B", to: "C" }, { from: "B", to: "D" } ]); // TreeModel maintains the link relationship by specifying the parent node. myDiagram.model = new go.TreeModel( [ { key: "A" }, { key: "B", parent: "A" }, { key: "C", parent: "B" }, { key: "D", parent: "B" } ]);Copy the code

   In the example above, when the nodes are successfully linked, the structure relationship created by TreeModel is not clear. In this case, we need to solve this problem by using the diagram layout.

5. The chart layout

   It is possible to control the display by setting the location of each node, but it is not easy to control the display by setting the layout directly.

   MyDiagram. Layout = $(go.treelayout, {Angle: 90, layerSpacing: 35}); // TreeLayout defaults to left to right and sets Angle to 90 degrees to implement top to bottom myDiagram.Copy the code

6. Control the Link Templates style

   Link styles are controlled by setting linkTemplate. Links are different from nodes, and links are mainly composed of shapes.

   // Set the routing property to a right Angle, and by setting the corner value, MyDiagram. LinkTemplate = $(go.link, // default routing is go.link.Normal // Default Angle is 0 {routing: Orthogonal, corner: 5}, // Path Shape $(go.Shape, {strokeWidth: 3, stroke: 3) $(go.Shape, {toArrow: "Standard", stroke: null}));Copy the code