引入相关文件

  1. <script src="gojs/go-debug.js"></script>//开发版
  2. <script src="gojs/go.js"></script>//正式版

除去水印

在文件go.js或者go-debug.js中搜索”7ca11abfd022028846”;将水印代码注释掉
image.png
每个 GoJS 图形实例都需要一个 HTML 容器 <div> 并明确指定其大小

  1. <!-- 图形的容器 div 需要明确指定大小，否则无法显示，本例子中我们还给该 DIV 添加了一个背景颜色，可以很方便的查看其大小。 -->
  2. <div id="diagramDiv" style="width:400px; height:150px; background-color: #DAE4E4;"></div>

在 JS 代码中，需要将 <div> 的 id 作为参数来创建图形。

  1. var $ = go.GraphObject.make;
  2. var myDiagram = 
  3.     $(go.Diagram, "diagramDiv",
  4.                 {
  5.                     initialContentAlignment: go.Spot.TopLeft,
  6.                     grid: $(go.Panel, "Grid",
  7.                         { gridCellSize: CellSize },
  8.                         $(go.Shape, "LineH", { stroke: "lightgray" }),
  9.                         $(go.Shape, "LineV", { stroke: "lightgray" })
  10.                     ),
  11.                     // 在拖动和调整大小时支持栅格捕捉
  12.                     "draggingTool.isGridSnapEnabled": true,
  13.                     "draggingTool.gridSnapCellSpot": go.Spot.Center,
  14.                     "resizingTool.isGridSnapEnabled": true,
  15.                     "animationManager.isEnabled": false,
  16.                     "undoManager.isEnabled": true
  17.                 });

这样就创建了一个空的画布。
image.png
图的节点和链接是由模型管理的数据的可视化。GoJS有一个模型-视图体系结构，其中模型保存描述节点和链接的数据（JavaScript对象数组），图表充当视图，使用实际的节点和链接对象可视化这些数据。模型，而不是图表，是您在编辑后加载并保存的内容。在模型中的数据对象上添加应用程序所需的任何属性；您不会向关系图和GraphObject类的原型添加属性或修改原型。

创建一个模型的过程

  1. var $ = go.GraphObject.make;
  2. //模型配置
  3. var myDiagram =
  4.   $(go.Diagram, "myDiagramDiv",
  5.     {
  6.       "undoManager.isEnabled": true // 启用Ctrl-Z以撤消，启用Ctrl-Y以重做
  7.     });
  8. // 在模型数据中，每个节点由一个JavaScript对象表示：
  9. myDiagram.model = new go.GraphLinksModel([
  10.   { key: "Alpha" },
  11.   { key: "Beta" },
  12.   { key: "Gamma" }
  13. ]);
  • 单击并拖动上图中的背景以平移视图。
  • 单击一个节点以选择它，或按下并拖动一个节点来移动它。
  • 要创建选择框，请单击并按住背景，然后开始拖动。
  • 使用 CTRL-C 和 CTRL-V 或控制拖放来制作选择的副本。
  • 按 Delete 键删除选定的节点。

  • 由于撤消管理器已启用，CTRL-Z 和 CTRL-Y 将撤消和重做移动以及复制和删除。

    节点模板

    通过创建由 GraphObject 组成的模板并在这些对象上设置属性来设置节点的样式。

  • Shape，显示带有颜色的预定义或自定义几何图形

  • TextBlock，以各种字体显示（可能可编辑）文本
  • Picture, 显示图片
  • Panel，用于容纳其他对象的集合的容器，这些对象可以根据 Panel 的类型以不同的方式定位和调整大小（如桌子、垂直堆栈和拉伸容器）

所有这些构建块都派生自GraphObject抽象类，因此我们随便将它们称为 GraphObjects 或对象或元素。请注意，GraphObject_不是_HTML DOM 元素，因此在创建或修改此类对象时没有那么多开销。
一个包含一个 TextBlock 的 Node。TextBlock 的text属性和模型数据的key属性之间存在数据绑定。

  1. myDiagram.nodeTemplate = 
  2.   $(go.Node, 
  3.     $(go.TextBlock, // TextBlock.text 绑定到 Node.data.key new go.Binding( "text" , "key" )) 
  4.   );

TextBlocks、Shapes 和 Pictures 是GoJS的原始构建块。
TextBlocks 不能包含图像；
形状不能包含文本。
如果您希望节点显示一些文本，则必须使用 TextBlock。
如果要绘制或填充一些几何图形，则必须使用 Shape。

连线模板

Link 的主要元素是 Link 的形状，并且必须是一个形状，其几何形状将由GoJS动态计算。我们的链接将仅由这种形状组成，其笔触比正常粗一点，深灰色而不是黑色。与默认链接模板不同，我们没有箭头。
我们将 Linkrouting属性从 Normal更改为 Orthogonal，并为其指定一个corner值，以便使直角转弯变得圆润。

  1. // 定义一个正交路由的链接模板，没有箭头
  2. myDiagram.linkTemplate = 
  3. $(go.Link, // 默认路由是 go.Link.Normal // 默认角为 0 
  4. { routing : go.Link.Orthogonal, corner : 5 }, 
  5. $(go.Shape, { strokeWidth : 3 , stroke : "#555" }) // 链接形状// 如果我们想要一个箭头，我们还可以添加另一个定义了 toArrow 的形状：// $(go.形状, { toArrow: "Standard", stroke: null } 
  6. );

将 Link 模板与 Node 模板、TreeModel 和 TreeLayout 结合起来，就有了一个完整的组织图。

  1. var $ = go.GraphObject.make;
  2. var myDiagram =
  3. $(go.Diagram, "myDiagramDiv",
  4. {
  5. "undoManager.isEnabled": true, // 启用 Ctrl-Z 撤消和 Ctrl-Y 重做
  6. layout: $(go.TreeLayout, // 指定一个 Diagram.排列树木的布局
  7. { angle: 90, layerSpacing: 35 })
  8. });
  9. // 之前定义的模板
  10. myDiagram.nodeTemplate =
  11. $(go.Node, "Horizontal",
  12. { background: "#44CCFF" },
  13. $(go.Picture,
  14. { margin: 10, width: 50, height: 50, background: "red" },
  15. new go.Binding("source")),
  16. $(go.TextBlock, "Default Text",
  17. { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
  18. new go.Binding("text", "name"))
  19. );
  20. // 定义一个正交路由的链接模板，没有箭头
  21. myDiagram.linkTemplate =
  22. $(go.Link,
  23. { routing: go.Link.Orthogonal, corner: 5 },
  24. $(go.Shape, { strokeWidth: 3, stroke: "#555" })); //链接形状
  25. var model = $(go.TreeModel);
  26. model.nodeDataArray =
  27. [
  28. { key: "1",              name: "Don Meow",   source: "/images/learn/cat1.png" },
  29. { key: "2", parent: "1", name: "Demeter",    source: "/images/learn/cat2.png" },
  30. { key: "3", parent: "1", name: "Copricat",   source: "/images/learn/cat3.png" },
  31. { key: "4", parent: "3", name: "Jellylorum", source: "/images/learn/cat4.png" },
  32. { key: "5", parent: "3", name: "Alonzo",     source: "/images/learn/cat5.png" },
  33. { key: "6", parent: "2", name: "Munkustrap", source: "/images/learn/cat6.png" }
  34. ];
  35. myDiagram.model = model;

结果:
image.png

监听事件

  1. //添加监听节点生成事件
  2. myDiagram.addDiagramListener("externalobjectsdropped",function(e) {
  3.     e.subject.each(function(n){
  4.        if(n.data.key.indexOf("FTPIN") != -1||n.data.key.indexOf("MQTTIN") != -1||n.data.key.indexOf("HTTPIN") != -1||n.data.key.indexOf("RTSPIN") != -1){
  5.             myDiagram.model.addLinkData({ from: n.data.key, to: 1 });
  6.        }
  7.        if(n.data.key.indexOf("FTPOUT") != -1||n.data.key.indexOf("MQTTOUT") != -1||n.data.key.indexOf("HTTPOUT") != -1){
  8.            myDiagram.model.addLinkData({ from:1 , to: n.data.key });
  9.        }
  10.     });
  11.   });