A, simple use:

1. Introduction Method:

(1) Download GoJs and introduce it locally:

<script src="go-debug.js"></script>

(2) Introduction by means of CDNJS:

< script SRC = "https://cdnjs.cloudflare.com/ajax/libs/gojs/1.7.15/go-debug.js" > < / script >

2. Create a box and create a div with an explicit size

<div id="myDiagramDiv" style="width:700px; height:600px; background-color: #f40;" ></div>Copy the code

3. In javaScript code, make sure to create the icon under div

var $ = go.GraphObject.make;
var myDiagram = $(go.Diagram, "myDiagramDiv");
Copy the code

This creates an empty icon.

The above three steps are the three you must do to get started using go.js.

Note that go is a namespace that all GoJs types depend on. All classes that use GoJs such as Diagram, Node, Panel, Shape, and TextBlock need to be prefixed with Go.

4. The complete example code is as follows:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <meta http-equiv=" x-UA-compatible "content=" IE =edge"> <title>Document</title> <script src="https://unpkg.com/gojs/release/go-debug.js"></script> </head> <body> <div id="myDiagramDiv" style="width:700px; height:600px; background-color: #DAE4E4;" ></div> <script> var $ = go.GraphObject.make; var myDiagram = $(go.Diagram, "myDiagramDiv"); </script> </body> </html>Copy the code

5, a complete case, the code is as follows:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <meta http-equiv=" x-UA-compatible "content=" IE =edge"> <title>Document</title> <script src="https://unpkg.com/gojs/release/go-debug.js"></script> </head> <body> <div id="myDiagramDiv" style="width:700px; height:600px; background-color: #DAE4E4;" ></div> <script> var $ = go.GraphObject.make; var myDiagram = $(go.Diagram, "myDiagramDiv", { "undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo layout: $(go.TreeLayout, // specify a Diagram.layout that arranges trees { angle: 90, layerSpacing: 35 }) }); // the template we defined earlier myDiagram.nodeTemplate = $(go.Node, "Horizontal", { background: "#44CCFF" }, $(go.Picture, { margin: 10, width: 50, height: 50, background: "red" }, new go.Binding("source")), $(go.TextBlock, "Default Text", { margin: 12, stroke: "white", font: "bold 16px sans-serif" }, new go.Binding("text", "name")) ); // define a Link template that routes orthogonally, with no arrowhead myDiagram.linkTemplate = $(go.Link, { routing: go.Link.Orthogonal, corner: 5 }, $(go.Shape, { strokeWidth: 3, stroke: "#555" })); // the link shape var model = $(go.TreeModel); model.nodeDataArray = [{ key: "1", name: "Don Meow", source: "/images/learn/cat1.png" }, { key: "2", parent: "1", name: "Demeter", source: "/images/learn/cat2.png" }, { key: "3", parent: "1", name: "Copricat", source: "/images/learn/cat3.png" }, { key: "4", parent: "3", name: "Jellylorum", source: "/images/learn/cat4.png" }, { key: "5", parent: "3", name: "Alonzo", source: "/images/learn/cat5.png" }, { key: "6", parent: "2", name: "Munkustrap", source: "/images/learn/cat6.png" } ]; myDiagram.model = model; </script> </body> </html>Copy the code

For deep learning, please visit gojs.net.cn/intro/index… To learn.