gojs常用API-画布操作

画布

获取当前画布的json	myDiagram.model.toJson();
加载json刷新画布	myDiagram.model = go.Model.fromJson(model);
删除选中节点或线	myDiagram.commandHandler.deleteSelection();
获取选中的节点或线 myDiagram.selection	//用例获取选中的节点或线 var nodeOrLinkList=myDiagram.selection; nodeOrLinkList.each(function(nodeOrLink) { console.log(nodeOrLink.data); }); //获取第一个选中的节点或线 var nodeOrLink=myDiagram.selection.first()
获取画布所有节点对象 myDiagram.nodes	var nodes=myDiagram.nodes; //遍历输出节点对象 nodes.each(function (node) { console.log(node.data.text); });

节点

 

添加节点	myDiagram.model.addNodeData(nodeData);
删除节点	myDiagram.model.removeNodeData(nodeData);
选中单个节点（不能批量选中）	myDiagram.select(node);
更改属性值	myDiagram.model.setDataProperty(nodeData, 'color', "#ededed");
根据节点数据对象 更改节点属性 myDiagram.model.updateTargetBindings(nodeData);	var nodeData = myDiagram.model.findNodeDataForKey('4.1'); nodeData.text = "2333" nodeData.color = "#000000"; myDiagram.model.updateTargetBindings(nodeData);
获取节点对象	var node=myDiagram.findNodeForKey('key');
获取节点data	var nodeData=myDiagram.model.findNodeDataForKey('key');
批量删除节点 myDiagram.model.removeNodeDataCollection(nodes)	var removeNodes = [];  var aNodeData = myDiagram.model.findNodeDataForKey('Akey'); var bNodeData = myDiagram.model.findNodeDataForKey('Bkey'); removeNodes.push(aNodeData ); removeNodes.push(bNodeData); myDiagram.model.removeNodeDataCollection(removeNodes);
模糊获取节点(版本1.68以上) 注意值类型，字符串和数值 myDiagram.findNodesByExample(data); 匹配方式默认为===运算符进行比较。 /abc/ 匹配包含“abc”的任何字符串 /abc/i 匹配包含“abc”的任何字符串，忽略大小写 /^no/i 匹配任何以“no”开头的字符串，忽略大小写 /ism$/匹配任何以“ism”结尾的字符串 /(green|red) apple/ 匹配包含“green apple”或“red apple”的字符串 官网还有更多的匹配方式，这里就不列举了	//注意值类型，字符串和数值， //如果json中是1.1，写成"1.1"就会查询不到 var data={};    data.text="设计"; // data.text=/设计/; // data.text=/设计/i; // data.text=/^设计/; // data.text=/设计$/; // data.text=/(勘|察)设计/; var nodes = myDiagram.findNodesByExample(data);     nodes.iterator.each(function (node) {       console.log(node.data); });

线

添加线	myDiagram.model.addLinkData(linkData);
删除线	myDiagram.model.removeLinkData(linkData);
批量删除线 {Array|iterator} removeLinks removeLinkDataCollection(removeLinks);	var removeLinks=[]; //首先拿到这个节点的对象 var node = myDiagram.findNodeForKey('key'); //获取节点所有线 node.findLinksConnected().each(function(link) {       removeLinks.push(link.data);     }  ); myDiagram.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); });
更改属性值	myDiagram.model.setDataProperty(linkData, 'from', "-2");
获取节点的线 {string | null =} PID 端口ID findLinksConnected(PID)	var node=myDiagram.findNodeForKey('key'); node.findLinksConnected().each(function(link) {console.log(link.data)});
获取进入节点的线 {string | null =} PID 端口ID findLinksInto(PID)	var node=myDiagram.findNodeForKey('key'); node.findLinksInto().each(function(link) {console.log(link.data)});
获取从节点出来的线 {string | null =} PID 端口ID findLinksOutOf(PID)	var node=myDiagram.findNodeForKey('key'); node.findLinksOutOf().each(function(link) {console.log(link.data)});
获取A-B节点之间的线 {node } othernode B节点对象 {string | null =} PID 端口ID {string | null =} otherPID B节点端口ID findLinksTo(othernode, PID, otherPID)	var nodeA=myDiagram.findNodeForKey('key'); var nodeB=myDiagram.findNodeForKey('key'); nodeA.findLinksTo(nodeB).each(function(link) {console.log(link.data)});

树节点

根据甲，找甲的祖宗十八代（包括甲） node.findTreeParentChain();	node.findTreeParentChain().each(function(pNode) { console.log(pNode.data) });
根据甲，找甲的子孙十八代（包括甲） node.findTreeParts();	node.findTreeParts().each(function(sNode) { console.log(sNode.data) });
根据甲，找甲的父亲 node.findTreeParentNode();	var pNode=node.findTreeParentNode();
根据甲，找甲的孩子们 node.findTreeChildrenNodes();	node.findTreeChildrenNodes().each(function(cNode) { console.log(cNode.data) });
根据甲，获取甲和其孩子的关系  node.findTreeChildrenLinks();	未测

 gojs操作画布常用API

 

	API	用例
增	addNodeData(节点对象); addLinkData(线对象);	var node = {}; node["key"] = "节点Key"; node["loc"] = "0 0";//节点坐标 node["text"] = "节点名称"; myDiagram.model.addNodeData(node);
删	removeNodeData(节点对象) removeLinkData(线对象);	//首先拿到这个节点的对象,这里直接通过节点的Key获取， //也可以通过各种事件的返回的对象中获取 var nodeData = myDiagram.model.findNodeDataForKey('key'); //删除单个节点 myDiagram.model.removeNodeData(nodeData);
改	参数: data:  nodeData或linkData propname：属性名 val:修改的值 setDataProperty(data, propname, val);	//首先拿到这个节点的data对象 var nodeData = myDiagram.model.findNodeDataForKey('key'); //然后对这个对象的属性进行更改，如果没有则新增这个属性 myDiagram.model.setDataProperty(nodeData, 'color', "#ededed");
查	根据key获取节点data对象 findNodeDataForKey('节点key'); 根据linkData模糊匹配线集合 (gojs1.68以上) findLinksByExample(linkData)	//根据Key获取节点数据对象 var nodeData = myDiagram.model.findNodeDataForKey('key'); //根据linkData，模糊匹配线集合,linkData可以为部分属性组成 //如from:-1或to:-1,或者from:-1,to:-1 var links=myDiagram.findLinksByExample({"from":-1, "to":-2}); while (links.next()) { //遍历输出所有线数据对象 console.log(links.value.data); }

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 gojs 函数实践

1、添加节点

1.  
   var CreateNode={
2.  
   key:getNextKey(), //设置key的方法，每个节点最好是有自己独立的key
3.  
   "category":"nodeStyleOne", //节点样式选择?nodeStyleOne? => 你自己定义的样式名
4.  
   "loc":"",
5.  
   "text":"节点的text值",//也阔以是动态的值
6.  
   source:“123.svg”,//也阔以是动态的路径
7.  
   }
8.  
   myDiagram.model.addNodeData(CreateNode);

2、动态加线

myDiagram.model.addLinkData({"from":连线起点的key, "to":连线终点key,"category":样式名});

gojs最佳教程: http://www.devtalking.com/categories/%E5%89%8D%E7%AB%AF/

https://liuxiaofan.com/2018/03/16/3521.html

https://www.jianshu.com/p/f91fbf085574

http://www.aubreyling.com/category/javascript/gojs/

数据绑定

事件

参考以上考程，能基本上把gojs弄懂