1var node = {}; 2 node["key"] = "节点Key"; 3 node["loc"] = "0 0";//节点坐标 4 node["text"] = "节点名称"; 5// 添加节点 通过按钮点击，添加新的节点到画布 6myDiagram.model.addNodeData(node); 7 8if (myDiagram.commandHandler.canDeleteSelection()) { 9 // 删除选中节点或线，页面上有个按钮点击，可以删除选择的节点和线 10 myDiagram.commandHandler.deleteSelection(); 11 return; 12} 13 14// 获得当前画布的json，获取当前画布的所有元素的json,用来保存 15var model= myDiagram.model.toJson(); 16//model=eval('('+model+')');若格式异常抓一下 17var nodes=model.nodeDataArray;取出所有节点 18var Links=model.linkDataArray;取出所有线 19 20// 加载json刷新画布，一般用来刷新和加载画布上的元素 21model=myDiagram.model.toJson() 22myDiagram.model = go.Model.fromJson(model); 23 24// 通过节点key获取节点，知道节点key ,拿到这个节点的详细信息 25var node = myDiagram.model.findNodeDataForKey('key'); 26 27var node = myDiagram.model.findNodeDataForKey('key'); 28//首先拿到这个节点的对象 29myDiagram.model.setDataProperty(node, 'color', "#ededed"); 30//然后对这个对象的属性进行更改，更改节点属性值，更改节点的颜色，或者大小等 31 32// 获取获得焦点的第一个元素，可为节点或者线 33var node=myDiagram.selection.first(); 34console.log(node.data.key);//用例获取选中的节点或线var nodeOrLinkList=myDiagram.selection;nodeOrLinkList.each(function(nodeOrLink) {console.log(nodeOrLink.data);}); 35 36// 获取画布所有节点对象myDiagram.nodes获取所有获得焦点的节点 37var items=''; 38 for(var nit=myDiagram.nodes;nit.next();){ 39 var node=nit.value; 40 if(node.isSelected){ 41 items+=node.data.key+","; 42 } 43 } 44console.log(items); 45 46// 遍历整个画布的节点信息写法 47for(var nit=myDiagram.nodes;nit.next();){ 48 var node=nit.value; 49 var key=node.data.key; 50 var text=node.data.text; 51} 52 53// 给节点添加线 54myDiagram.model.addLinkData({ from: "节点的Key", to: "连到另一节点的key" })// 删除线myDiagram.model.removeLinkData(linkData);
//批量删除线
{Array|iterator} removeLinks
removeLinkDataCollection(removeLinks);
1var removeLinks=[]; 2//首先拿到这个节点的对象 3var node = myDiagram.findNodeForKey('key'); 4//获取节点所有线 5node.findLinksConnected().each(function(link) { 6 removeLinks.push(link.data); 7 } 8 ); 9myDiagram.model.removeLinkDataCollection(removeLinks);// 模糊获取线(版本1.68以上)注意值类型，字符串和数值 匹配 方式和模糊获取节点的规则一致
myDiagram.findLinksByExample(data);
//注意值类型，字符串和数值
//如果json中是from:1.1，写成from:"1.1"就会查询不到
var links=myDiagram.findLinksByExample({from:1.1, to:2.1});
links.iterator.each(function (link) {
console.log(link.data);
});
1var newdata = { "text":"AAAA", "key":-33,"loc":"0 0" }; 2 myDiagram.model.addNodeData(newdata); 3 var newdat2= myDiagram.model.findNodeDataForKey('-3'); 4 console.log(newdat2); 5 var node = myDiagram.findNodeForData(newdat2); 6 console.log(node); 7myDiagram.select(node);//选中节点 8 9// 特殊案例API用法 10myDiagram.findNodeForData(objNode); 11myDiagram.findLinkForData(objLink); 12// 其中objNode或者objLink,只能从画布的json 对象取出，不能直接手写例如 13var newdata={"text":"AAAA","key":-33,"loc":"0 0"}; 14var node = myDiagram.findNodeForData(newdat2); 15// 除了刚好是新建的节点外，，不然是获取不到这个对象的，因为添加节点时，gojs会自动给节点或者线添加一个属性 16 17// 节点选中改变事件 selectionChanged: 回调的函数方法名 18//该属性要写在$(go.Node,）内用大括号括起来 19myDiagram.nodeTemplate = 20 $(go.Node, "Horizontal", 21 { selectionChanged: nodeSelectionChanged }, 22 //节点选中改变事件，nodeSelectionChanged为回调的方法名 23 $(go.Panel, "Auto", 24 $(go.Shape,//节点形状和背景颜色的设置 25 { fill: "#1F4963" }, 26 new go.Binding("fill", "color") 27 ), 28 ) 29 );//go.Node的括号 30 31//回调方法 节点选中的时候是一种颜色，取消选中是另一种颜色 32function nodeSelectionChanged(node) { 33 if(node.isSelected) {// 34 //节点选中执行的内容 35 console.log(node.data);//节点的属性信息 36 console.log(node.data.key);//拿到节点的Key,拿其他属性类似 37 var node1 = myDiagram.model.findNodeDataForKey(node.data.key); 38 myDiagram.model.setDataProperty(node1, "fill", "#ededed"); 39 } else { 40 //节点取消选中执行的内容 41 var node1 = myDiagram.model.findNodeDataForKey(node.data.key); 42 myDiagram.model.setDataProperty(node1, 'fill', "1F4963 "); 43 } 44} 45 46// 节点双击事件 47doubleClick : function(e, node){ 48 //node为当前双击的节点的对象信息 49} 50//该属性要写在$(go.node,）内用大括号括起来 51myDiagram.nodeTemplate = 52 $(go.Node, "Horizontal", 53 $(go.Panel, "Auto", 54 $(go.Shape,//节点形状和背景颜色的设置 55 { fill: "#1F4963" }, 56 new go.Binding("fill", "color") 57 ), 58 {doubleClick : function(e, node){// 双击事件 59 handlerDC(e, node);//双击执行的方法 60 } 61 } 62 ) 63 );//go.Node的括号 64 65//双击执行的方法 66function handlerDC(e, obj) { 67 var node = obj.part;//拿到节点的json对象，后面要拿什么值就直接.出来 68 var procTaskId = node.data.key; 69 var procTaskName = node.data.text; 70 var description = node.data.description; 71 var procTmplId = node.data.tmplId; 72} 73// 该例子主要应用场景为，双击节点，得到节点的详细信息，弹出窗口修改节点的信息 74 75// 从Palette拖过来节触发的事件 76myDiagram.addDiagramListener("externalobjectsdropped", function(e) { 77 console.log(e); 78}); 79 80myDiagram.addDiagramListener("externalobjectsdropped", function(e) { 81 e.subject.each(function(n){ 82 //得到从Palette拖过来的节点 83 console.log(n.data.key); 84 }); 85}); 86 87// 当前画布被拖动的节点 未测试 88myDiagram.addDiagramListener("Modified", function(e) { 89 myDiagram.isModified = false; 90 91 iter = myDiagram.selection.iterator; 92 93 while (iter.next()) { 94 var part = iter.value; 95 if (part instanceof go.Link) { 96 if ( ( part.data.from == 0 || part.data.from == undefined) || ( part.data.to == 0 || part.data.to == undefined ) ) { 97 myDiagram.model.setDataProperty(part.data, 'link-color', 'red'); 98 console.log(part.data); 99 console.log("非法"); 100 } else if(part.data.from > 0 || part.data.from < 0 ) { 101 var node = myDiagram.findNodeForKey(part.data.from); 102 if (!node) { 103 console.log("非法"); 104 } 105 }else if(part.data.to > 0 || part.data.to < 0 ) { 106 var node = myDiagram.findNodeForKey(part.data.to); 107 if (!node) { 108 console.log("非法"); 109 } 110 } 111 } 112 } 113 114var $ = go.GraphObject.make; 115// 定义画布的基本属性 这里绑定画布所用的div,并保存在myDiagram中，后续的节点设置均使用这个变量，意思是在这个画布上定义节点和操作节点 116myDiagram = $(go.Diagram, "myDiagram", //画布绑定的Div的ID 117 { 118 initialContentAlignment: go.Spot.Center, // 画布的位置设置（居中，靠左等） 119 allowDrop: true, // must be true to accept drops from the Palette 120 "LinkDrawn": showLinkLabel, // 121 "LinkRelinked": showLinkLabel, 122 "animationManager.duration": 600, // 画布刷新的加载速度 123 "undoManager.isEnabled": true, // "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, 124 allowZoom: true // 允许缩放，false为否 125 isReadOnly: false // 是否禁用编辑 false否， 126 true是 //ismodelfied:true //禁止拖拽 127 128}); 129 130// 定义单种节点 131myDiagram.nodeTemplate=$(go.Node,***) 132//***为对节点的定义 133myDiagram.nodeTemplate = 134 $(go.Node, "Horizontal", 135 { selectionChanged: nodeSelectionChanged }, 136 //节点选中改变事件，nodeSelectionChanged为回调的方法名 137 $(go.Panel, "Auto", 138 $(go.Shape,//节点形状和背景颜色的设置 139 { fill: "#1F4963", stroke: null } 140 ), 141 $(go.TextBlock, 142 { font: "bold 13px Helvetica, bold Arial, sans-serif",//字体 143 editable：true, 144 stroke: "white",//颜色 145 margin: 3 }, 146 new go.Binding("text", "key") 147 )//go.TextBlock,的括号 148 )//go.Panel 的括号 149 );//go.Node的括号 150 151// 定义多种节点(画布上有多种节点) 152myDiagram.nodeTemplateMap.add("A种节点",$(go.Node,***)) 153//一种类型的节点 154myDiagram.nodeTemplateMap.add("Start", 155 $(go.Node, "Spot", 156 $(go.Panel, "Auto", 157 $(go.Shape, "Circle", { 158 minSize: new go.Size(40, 40), 159 fill: "#79C900", 160 stroke: null 161 }) 162 ) 163 )//go.Node的括号 164); 165//另一种类型的节点 166myDiagram.nodeTemplateMap.add("End", 167 $(go.Node, "Spot", 168 $(go.Panel, "Auto", 169 $(go.Shape, "Circle", { 170 minSize: new go.Size(40, 40), 171 fill: "#DC3C00", 172 stroke: null 173 }) 174 ) 175 )//go.Node的括号 176); 177 178//添加不同种类的节点 179 var node = {}; 180 node["text"] = "2222"; 181 node["key"] = "33"; 182 node["loc"] = "0 0"; 183 node["category"] = "Start";//category 184 myDiagram.model.addNodeData(node); 185 186// 定义线 187myDiagram.linkTemplate=$(go.Link,***); 188 189//添加监听节点生成事件 190myDiagram.addDiagramListener("externalobjectsdropped", function(e) { 191 e.subject.each(function(n){ 192 console.log(n.data.key); 193 }); 194}); 195 196//添加监听线生成事件 197myDiagram.addDiagramListener("LinkDrawn", function(e) { 198 console.log(e.subject.data.to); 199}) 200 201//监听节点删除事件 202myDiagram.addDiagramListener("SelectionDeleted", function(e) { 203 e.subject.each(function(n){ 204 console.log(n.data.key); 205 }); 206}) 207 208//节点 209//获取节点实际边界（宽高） 210node.naturalBounds 返回值Rect(0,0,126,31) 211//添加节点 212myDiagram.model.addNodeData(nodeData); 213//删除节点 214myDiagram.model.removeNodeData(nodeData); 215//选中单个节点或线 216myDiagram.select(node); 217//更改属性值 218myDiagram.model.setDataProperty(nodeData, 'color', "#ededed"); 219//根据节点数据对象更改节点属性 220myDiagram.model.updateTargetBindings(nodeData); 221var nodeData = myDiagram.model.findNodeDataForKey('4.1'); 222nodeData.text = "2333" 223nodeData.color = "#000000"; 224myDiagram.model.updateTargetBindings(nodeData); 225//获取节点对象 226var node=myDiagram.findNodeForKey('key'); 227//获取节点data 228var nodeData=myDiagram.model.findNodeDataForKey('key'); 229//批量删除节点 230myDiagram.model.removeNodeDataCollection(nodes) 231var removeNodes = []; 232var aNodeData = myDiagram.model.findNodeDataForKey('Akey'); 233var bNodeData = myDiagram.model.findNodeDataForKey('Bkey'); 234removeNodes.push(aNodeData ); 235removeNodes.push(bNodeData); 236myDiagram.model.removeNodeDataCollection(removeNodes); 237 238//模糊获取节点(版本1.68以上)注意值类型，字符串和数值 239myDiagram.findNodesByExample(data); 240匹配方式默认为===运算符进行比较。 241/abc/ 匹配包含“abc”的任何字符串 242/abc/i 匹配包含“abc”的任何字符串，忽略大小写 243/^no/i 匹配任何以“no”开头的字符串，忽略大小写 244/ism$/匹配任何以“ism”结尾的字符串 245/(green|red) apple/ 匹配包含“green apple”或“red apple”的字符串 246 247//注意值类型，字符串和数值， 248//如果json中是1.1，写成"1.1"就会查询不到 249var data={}; 250 data.text="设计"; 251// data.text=/设计/; 252// data.text=/设计/i; 253// data.text=/^设计/; 254// data.text=/设计$/; 255// data.text=/(勘|察)设计/; 256var nodes = myDiagram.findNodesByExample(data); 257 nodes.iterator.each(function (node) { 258 console.log(node.data); 259}); 260 261//更改属性值 262myDiagram.model.setDataProperty(linkData, 'from', "-2"); 263//获取节点的线 264{string | null =} PID 端口ID 265findLinksConnected(PID) 266var node=myDiagram.findNodeForKey('key'); 267node.findLinksConnected().each(function(link) {console.log(link.data)}); 268//获取进入节点的线 269{string | null =} PID 端口ID 270findLinksInto(PID) 271var node=myDiagram.findNodeForKey('key'); 272node.findLinksInto().each(function(link) {console.log(link.data)}); 273//获取从节点出来的线 274{string | null =} PID 端口ID 275findLinksOutOf(PID) 276var node=myDiagram.findNodeForKey('key'); 277node.findLinksOutOf().each(function(link) {console.log(link.data)}); 278//获取A-B节点之间的线 279{node } othernode B节点对象 280{string | null =} PID 端口ID 281{string | null =} otherPID B节点端口ID 282findLinksBetween(othernode, PID, otherPID) 283var nodeA=myDiagram.findNodeForKey('key'); 284var nodeB=myDiagram.findNodeForKey('key'); 285nodeA.findLinksBetween(nodeB).each(function(link) {console.log(link.data)}); 286 287//树节点 288//根据甲，找甲的所有父级（包括甲） 289node.findTreeParentChain(); 290node.findTreeParentChain().each(function(pNode) { 291console.log(pNode.data) 292}); 293//根据甲，找甲的所有子级（包括甲） 294node.findTreeParts(); 295node.findTreeParts().each(function(sNode) { 296console.log(sNode.data) 297}); 298//根据甲，找甲的父亲 299node.findTreeParentNode(); 300var pNode=node.findTreeParentNode(); 301//根据甲，找甲的孩子们 302node.findTreeChildrenNodes(); 303node.findTreeChildrenNodes().each(function(cNode) { 304console.log(cNode.data) 305}); 306 307基础画布定义API 308//画布初始位置 309initialContentAlignment: go.Spot.Center, 310//画布位置,定义后就不能拖动画布了，画布位置交由gojs管理 contentAlignment:go.Spot.Center, 311//初始坐标 312initialPosition: new go.Point(0, 0) 313//禁止移动节点 314allowMove:false 315//禁止复制 316allowCopy: false 317//禁止删除 318allowDelete:false 319//禁止选中 320allowSelect:false 321//禁止缩放 322allowZoom: false 323//禁止撤销和重做 324"undoManager.isEnabled": false 325//禁止水平滚动条 326allowHorizontalScroll: false 327//禁止垂直滚动条 328allowVerticalScroll: false 329//只读 330isReadOnly: true 331//画布初始化动画时间 332"animationManager.duration": 600 333//禁止画布初始化动画 334"animationManager.isEnabled": false 335//画布比例 336scale:1.5 337//画布比例自适应 338autoScale:go.Diagram.Uniform, 339//画布比例自适应 340autoScale:go.Diagram.UniformToFill, 341//默认值不自适应 342autoScale:go.Diagram.None, 343//画布最小比例 344minScale:1.2, 345//画布最大比例 346maxScale:2.0, 347//显示网格 348"grid.visible":true, 349//画布边距 350padding 351padding:80或者new go.Margin(2, 0)或new go.Margin(1, 0, 0, 1) 352 353画布节点连线定义 354//只允许有一个父节点 355validCycle:go.Diagram.CycleDestinationTree 356 357validCycle:go.Diagram.CycleNotUndirected 358 359validCycle:go.Diagram.CycleNotDirected 360 361validCycle:go.Diagram.CycleSourceTree 362 363//禁止鼠标拖动区域选中 364dragSelectingTool "dragSelectingTool.isEnabled" : false, 365//或者在画布对象myDiagram创建后再调用 366myDiagram.toolManager.dragSelectingTool.isEnabled = false ; 367 368validCycle 369默认无限制 validCycle:go.Diagram.CycleAll 节点之间连线随便连 370一个节点只允许有一个父节点，并且没有定向循环（仅允许维护树结构的链接） 371 372validCycle:go.Diagram.CycleDestinationTree 373禁止A→C,B→C 374 375节点的有效链接不会在图中产生有向循环 376validCycle:go.Diagram.CycleNotDirected 377 378禁止A-B-C-A 379节点的有效链接不会在图中产生无向循环 380validCycle:go.Diagram.CycleNotUndirected 381 382一个节点只允许有一个子节点并且没有定向循环。 validCycle:go.Diagram.CycleSourceTree 禁止A→B,A→C 383 384画布监听事件API 385节点生成事件 externalobjectsdropped 386线生成事件 LinkDrawn 387线重新连接事件 LinkRelinked 388删除后事件 SelectionDeleted 389删除前事件 SelectionDeleting 例子入口 390节点移动事件 SelectionMoved 391 392//监听节点或线的删除事件 393myDiagram.addDiagramListener("SelectionDeleted", function(e) { 394 e.subject.each(function(n){ 395 console.log(n.data.key); 396 }); 397})
自动布局API
1//网格布局 2go.GridLayout 3//力导向布局 4go.ForceDirectedLayout 5//树形布局 6go.TreeLayout 7//径向布局(需要引RadialLayout.js) 8RadialLayout 9 10// 用例定义画布节点为网格布局 11myDiagram = 12 $(go.Diagram, "myDiagramDiv", // 画布定义 13 { 14 layout: $(go.GridLayout, //自动布局定义，设置为网格布局 15 { 16 comparer: go.GridLayout.smartComparer, //设置从小到大排序 17 spacing: go.Size.parse("20 20"), //设置节点间隔 18 comparer: function (a, b) { 19 //重写布局算法,根据其他属性值重新增设置顺序 20 var ay = a.data.type; 21 var by = b.data.type; 22 if (!!ay && !!by) { 23 if (ay > by) return -1; 24 if (ay < by) return 1; 25 } else if (!!ay) { 26 return -1; 27 } else if (!!by) { 28 return 1; 29 } 30 } 31 }); 32 });
