GOJS入门(2)

时间:2024-04-05 20:04:32

由于GOJS是基于html5的js库,所以使用他的网页必须生命是一个html5的文档

<!DOCTYPE html>  <!-- HTML5 document type -->
<html>
<head>
  <!-- use go-debug.js when developing and go.js when deploying -->
  <script src="go-debug.js"></script>

可以直接下载gojs的文件或者使用cdn,
不过由于商用版本的限制,个人用的版本会出现水印
每个图表都被包含在一个确定大小的html div元素中

<!-- The DIV for a Diagram needs an explicit size or else we will not see anything.
     In this case we also add a background color so we can see that area. -->
<div id="myDiagramDiv"
     style="width:400px; height:150px; background-color: #DAE4E4;"></div>

通过div的id初始化成gojs的图表内容

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

从代码里面可以看到go是作为整个框架的命名空间在使用,所有用到gojs相关内容的部分都是以go开头的
$符号作为go.GraphObject.make的缩写也被用的很多,如果代码里面$用于其他用途,比如jquery,那可以将这个改用其他的缩写形式,比如$$,或者MAKE等等

示例中的js引用,以及代码的书写都是放在html的head标签里面的,这个有些难以理解,经测试放到body后也是可以使用的,不知道是有什么特殊的设置,后续学习的过程中看看是否有特别的地方。
GOJS是基于数据驱动MV(model-view)架构模型,数据存储于model中,用于修改和保存,图表根据node及link数据进行可视化展现

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

var myModel = $(go.Model);
// in the model data, each node is represented by a JavaScript object:
myModel.nodeDataArray = [
  { key: "Alpha" },
  { key: "Beta" },
  { key: "Gamma" }
];
myDiagram.model = myModel;

GOJS入门(2)
这样一段简单的代码完成后,就可以实现如下的功能:

  1. 点击空白并按住鼠标左键,可以通过平移整个图表
  2. 点击节点可以选中
  3. 选中节点并按住鼠标左键,可以移动特定节点
  4. 点击空白并按住鼠标左键,可以画出一个选择框,选中多个节点(与1的区别是,点击后等1s再滑动鼠标,这个隐藏属性也是醉了)
  5. 选中节点后,使用ctrl+c ctrl+v的方式 可以复制节点
  6. 选中节点后,使用delete按钮可以删除节点
  7. 使用ctrl+z ctrl+y可以进行撤回和重做操作(需要开启"undoManager.isEnabled": true 属性)

在一个代码量比较少的情况可以完成这么多功能,也是非常不错的,可以看出gojs本身已经将大部分交互的动作内置到框架本身,只需要通过设置相应的属性即可完成。