GOJS入门(2)

由于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;

在这里插入图片描述
这样一段简单的代码完成后，就可以实现如下的功能：

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

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

猜你喜欢