go.js初体验

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

引入

<script src="https://unpkg.com/gojs/release/go-debug.js"></script>

开始

准备容器

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

编写js

//一个空的图表
var $ = go.GraphObject.make;
var myDiagram =
  $(go.Diagram, "myDiagramDiv");

呈现结果：

最简单的例子：

var $ = go.GraphObject.make;

var myDiagram =
  $(go.Diagram, "myDiagramDiv",
    { // enable Ctrl-Z to undo and Ctrl-Y to redo
      "undoManager.isEnabled": true//【1】
    });

myDiagram.model = new go.Model(
  [ // for each object in this Array, the Diagram creates a Node to represent it
    { key: "Alpha" },
    { key: "Beta" },
    { key: "Gamma" }
  ]);

呈现结果：

这个时候可以：

• 可以挪动节点
• 选择节点可以ctrl-c和ctrl-v 复制节点
• 选择节点按Delete键删除节点

节点的样式

node 的种类：

• Shape
• TextBlock
• Picture
• Panel

上面的例子就相当于这样：

myDiagram.nodeTemplate =
  $(go.Node,
    $(go.TextBlock,
      // TextBlock.text 绑定 Node.data.key
      new go.Binding("text", "key"))
  );

model的种类

例如GraphLinksModel ，TreeModel

myDiagram.model = new go.GraphLinksModel(
  [ // the nodeDataArray
    { key: "A" },
    { key: "B" },
    { key: "C" }
  ],
  [ // the linkDataArray
    { from: "A", to: "B" },
    { from: "B", to: "C" }
  ]);

Layouts

图表布局，上述连线太乱，无法看出层级来，用layout 来解决此问题

  //! 默认是网格排列
  //! 当前树状model,我们使用TreeLayout
  myDiagram.layout =
      $(go.TreeLayout,
          { angle: 90, layerSpacing: 35 }); //TreeLayout默认是从左到右，想要他从上到下，angles设置为90；这个layout设置也可以在【1】处设置

Link Templates

调整连线的样式

myDiagram.linkTemplate =
      $(go.Link,
          // default routing is go.Link.Normal
          // default corner is 0
          { routing: go.Link.Orthogonal, corner: 5 },//线的样式（Normal，Orthogonal） 线的直角弯的圆度
          // the link path, a Shape
          $(go.Shape, { strokeWidth: 3, stroke: "#0cd" })//线的宽度 线的颜色

          // if we wanted an arrowhead we would also add another Shape with toArrow defined:
          // $(go.Shape, { toArrow: "Standard", stroke: null }
      );