由于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本身已经将大部分交互的动作内置到框架本身,只需要通过设置相应的属性即可完成。