Go.js简单使用的方法

最新推荐文章于 2025-10-06 15:40:57 发布

原创最新推荐文章于 2025-10-06 15:40:57 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

15 篇文章

订阅专栏

**API文档：https://gojs.net.cn/index.html**

# 1. 初始化画布 ```js /* css */ /* 去除画布选中高亮效果

/* html */
<div id="myDiagramDiv"></div>



/* js */
const _$ = go.GraphObject.make
const myDiagram = 
_$(go.Diagram, "myDiagramDiv", {
     allowHorizontalScroll: false,
     allowVerticalScroll: false, // 水平/垂直滚动条，阻止画布拖动
     initialContentAlignment: go.Spot.Top, // 节点在画布顶部对齐
     "toolManager.mouseWheelBehavior": go.ToolManager.WheelNone, //鼠标滚轮事件禁止
      // layout 官方自带布局方案
      layout: _$(go.TreeLayout, {
         angle: 90, // 树的方向 0（向右），90（向下），180（向左）或270（向上）
         layerSpacing: 20, // 连接线的长度
         nodeSpacing: 20, // 节点模板之间的间距
         arrangement: go.TreeLayout.ArrangementFixedRoots
       }),
       "undoManager.isEnabled": true
});

# 2. 创建节点模板

myDiagram.nodeTemplateMap.add('one', // 'one' 有多个节点模板时用来与数据中的'category'进行匹配
    _$(go.Node,'Vertical',{ // 'Vertical' 节点模板内元素排列方式
        selectable: false, // 是否可以选择，设为flase也可以阻止节点进行拖动
        isTreeExpanded: true // 子节点是否默认展开
        }，
        _$(
          go.Panel, // 类似创建一个div的
          'Auto',
          _$(
             go.Shape,
             'RoundedRectangle', // 设置div形状
             {
                 fill: '#000', // 背景色
                 stroke: '#fff', // 边框色
                 width: 200, // div 高宽
                 height: 120,
             }
          ),
          _$(go.TextBlock, { // TextBlock文本 Picture图片
              stroke: "#fff", // 文字颜色
              font: 'bold 20px Verdana, sans-serif', // 字体设置
            },
            // 数据绑定,对数据进行一些操作,设置中的参数都可以动态操作
            new go.Binding("text", "text", (val)=>{})
          ),
          _$(go.Picture, {
              desiredSize: new go.Size(32, 32), // 图片大小
              click: function (e, obj) {
                 console.log(obj.source)
               }
            }
            new go.Binding('source', 'img')
          )
        ),
        // 折叠模板按钮
        _$('TreeExpanderButton')
    )
)

# 3. 设置连接线样式

// 模板数据/连接线数据
let dataArry = [{
    key: 1, // 唯一值，用于节点之间连接数据
    category： 'one', // 有多个节点模板时,进行匹配
    text: 'xxx',
    img: 'xxx'
},{
    key: 2,
    category： 'one',
    text: 'xxx',
    img: 'xxx'
}]

let lintArry = [{
    from: 1, // 数据连接关系，与key值对应
    to: 2
}]
myDiagram.model = new go.GraphLinksModel(dataArry, lintArry)

# 5. 代码地址

`git clone https://gitee.com/liu_kang_123/demo_gojs.git`