Go.Js：Getting Start-CSDN博客

本文链接：https://blog.csdn.net/qq_43005779/article/details/108530555

Go.Js：Getting Start

实现一个简单的图

Step1 使用html5

Gojs是使用了html5的特性所以要用html5的编码格式作为基础

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

Step 2 引入Gojs的CDN

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

Step 3 创建一个div放置图

图要放置在一个容器中，且接下来gojs会使用这个容器的id作为定位和挂载时使用

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

step 4 图的具体实现

<script>
    // 为使用方便，把make函数保存在一个变量中
    var $ = go.GraphObject.make;
    // 创建myDiagram作为画板，并挂载在id为myDiagramDiv的容器总
    var myDiagram =$(go.Diagram, "myDiagramDiv");
    // 创建一个model来作为每个节点的数据结构，数据结构采用的是go中的TreeModel，并使用make函数进行绘制
    var model = $(go.TreeModel);
    // model中的节点的数据为一个数组nodeDataArray
    model.nodeDataArray =
      [
        // 数组中包含key作为关键字和显示的名字，因为是采用树的结构，所以parent表示这个节点的父节点
        { key: "A" },
        { key: "B", parent: "A" },
        { key: "C", parent: "B" }
      ];
    // 把数据和画板关联上
    myDiagram.model = model;
  </script>

图的简单变化

我们通常有几个东西想进行自定义：

Shape, 每个节点的形状，可以是简单的几何形状也可以是自己预先定义好的形状，也包括颜色
TextBlock, 每个节点的字体，包括颜色、大小等
Picture, 节点还可以有图片，也包括svg文件
Panel, 面板，面板可以包括很多东西，比如表格等

首先

首先我们要知道的是一个统一的定义这些东西的格式：

// 定义myDiagram上的节点模板
myDiagram.nodeTemplate =
  $(go.Node,
    // TextBlock定义的是节点上的文字样式
    $(go.TextBlock,
      // binding函数的第一个变量是节点上的属性，第二个是model上每个数据的属性
      // 下面这一句的意思是把数据中的name属性作为节点的text
      new go.Binding("text", "name"))
   );

在gojs中采用了mvvm的模式，也就是说数据和视图低耦合。所以节点的样式的定义是放在了画板上，当mode挂载时自动更改节点的样式。

通常一个节点的模板定义是这样的

myDiagram.nodeTemplate =
      $(go.Node, "Vertical", // 第二个参数是panel的类型
        /* 这里可以设定节点的属性 */{background: "#44CCFF",padding:10},
        { // the Node.location point will be at the center of each node
          locationSpot: go.Spot.Center
        },

        /* add Bindings here */
        // example Node binding sets Node.location to the value of Node.data.loc
        new go.Binding("location", "loc"),

        /* 节点形状 */
        // shape会显示在textBlock的上面
        $(go.Shape,
          "RoundedRectangle", // 默认的形状
          { /*形状的其他属性*/ width:10,height:10},
          // 节点形状和数据中的属性值绑定，可以做到数据不一样的形状
          new go.Binding("figure", "fig")),

        $(go.TextBlock,
          "default text",  // 默认文字
          { /* 文字的其他属性 */ stroke:'red'},
          // 节点的文字和数据的属性值绑定
          new go.Binding("text",'name'))
      );

数据定义为：

model.nodeDataArray =
      [
        // 数组中包含key作为关键字和显示的名字，因为是采用树的结构，所以parent表示这个节点的父节点
        { key: "A", name: 'a' },
        { key: "B", parent: "A", name: 'b' ,fig:'Rectangle'},
        { key: "C", parent: "B", name: 'c' }
      ];

两种数据节点

GraphLinksModel

var model = $(go.GraphLinksModel);
    // 有哪些节点
    model.nodeDataArray =
      [
        { key: "A" ,name:'a'},
        { key: "B" ,name:'b',fig:'Triangle'},
        { key: "C" }
      ];
    // 节点之间的链接关系
    model.linkDataArray =
      [
        { from: "A", to: "B" },
        { from: "B", to: "C" }
      ];

可以看出对节点的文字、形状等简单变化是放在nodeDataArray中的，linkDataArray只是表示节点之间的连接关系。

GraphLinksModel允许两个节点之间有任意关系，可以从’'A"到"B"再从"B"到"A"。但是TreeModel中是单向的

TreeModel

var model = $(go.TreeModel);
    // model中的节点的数据为一个数组nodeDataArray
    model.nodeDataArray =
      [
        // 数组中包含key作为关键字和显示的名字，因为是采用树的结构，所以parent表示这个节点的父节点
        { key: "A", name: 'a' },
        { key: "B", parent: "A", name: 'b' ,fig:'Rectangle'},
        { key: "C", parent: "B", name: 'c' }
      ];

在TreeModel中没有表示关系的数组，而是使用一个parent属性来表示节点之间的关系，而且是一个树的结构以为着不能子节点到父节点

Link Templates

myDiagram.linkTemplate =
    // 定义连接线的模板
      $(go.Link,
      // routing是连接线的样子，corner是箭头的大小
        { routing: go.Link.Orthogonal, corner: 5 },
        // 这里的shape是只连接线的形状，包括粗细，颜色
        $(go.Shape, // the link's path shape
          { strokeWidth: 3, stroke: "#555" })
      );