GoJS教程
GoJS是一个用于实现交互式图表的JavaScript库。
因为GoJS是一个依赖于HTML5特性的JavaScript库，所以您需要确保您的页面声明它是一个HTML5文档。
当然，你需要加载库:
<!DOCTYPE html> <!-- HTML5 document type -->
<html>
<head>
<!-- 开发环境用 go-debug.js ，生产环境用 go.js -->
<script src="go-debug.js"></script>
. . .您可以从这里下载GoJS以及所有文档和示例。或者你可以直接链接到一个CDN提供的GoJS库，如:
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>每个GoJS图（Diagram）都包含在一个指定了大小的<div>元素中
<!-- 用于表示图表的div需要显式的指定大小，否则我们什么都看不到。
我们在这个例子中添加了背景色，这样我们就可以看到这块区域了。-->
<div id="myDiagramDiv"
style="width:400px; height:150px; background-color: #DAE4E4;"></div>当我们创建图（Diagram）对象时，需要在JS代码中传入上述<div>的id
var $ = go.GraphObject.make;
var myDiagram =
$(go.Diagram, "myDiagramDiv");这样就成功创建了一个空的图！
注意，go是所有GoJS类型的“命名空间”。所有使用GoJS类的代码，如Diagram、Node、Panel、Shape、TextBlock，都将以“go.”作为前缀。
本文将通过示例向您展示如何使用go.GraphObject.make来构建GoJS对象。使用$作为go.GraphObject.make的缩写会非常方便，如果您已经在代码的其它地方使用了$，那么您可以在此处选择不同的短变量名，例如$$或MAKE或GO。
图（Diagram）和模型（Model）
我们在图（Diagram）中看到的节点（Node）和链接（Link）其实是数据可视化的结果，这些数据是由模型（Model）管理的。
GoJS有一个模型-视图（model-view）架构，其中模型保存描述节点和链接的数据(JavaScript对象数组)，而图充当视图，使用实际的节点和链接对象来可视化这些数据。模型（Model）是您在编辑后加载并保存的内容。
您可以在模型的数据对象上添加需要的任何属性;但您不能向Diagram和GraphObject类的原型添加或修改属性。
下面是一个模型和图的例子:
// 1.给go.GraphObject.make起简称
var $ = go.GraphObject.make;
// 2.创建Diagram对象
var myDiagram =
$(go.Diagram, "myDiagramDiv",
{ // 启用撤销（Ctrl-Z）和重做（Ctrl-Y）功能
"undoManager.isEnabled": true
});
// 3.创建Model对象
var myModel = $(go.Model);
// 给Model对象配置数据：对于该数组中的每一个对象，Diagram都会创建一个Node来表示它
myModel.nodeDataArray = [
{ key: "Alpha" },
{ key: "Beta" },
{ key: "Gamma" }
];
// 4.将Model传入Diagram
myDiagram.model = myModel;生成的效果图（截图）如下 ：
图显示了模型中的三个节点。我们可以尝试以下操作：
1.在上图中单击并拖动背景以平移视图。
2.单击节点以选择它，或按下并拖动节点以移动它。
3.要创建一个选择框，请在背景上单击并按住，然后开始拖动。
4.使用Ctrl-C和Ctrl-V或Ctrl-拖放 复制所选内容。
5.按Delete键删除所选节点。
6.在触控设备上，按下并按住键会弹出上下文菜单。
7.由于启用了撤消管理器，Ctrl-Z和Ctrl-Y将具备撤消和重做功能。
节点的式样
我们可以通过创建由GraphObjects组成的模板（templates）并在这些对象上设置属性来设置节点的样式。我们可以通过以下几个构建块类来创建一个节点：
1.
最低0.47元/天 解锁文章
1892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
