gojs常用API-画布操作

2019/05/12 11:05
阅读数 1.7K

画布

获取当前画布的json myDiagram.model.toJson();
加载json刷新画布 myDiagram.model = go.Model.fromJson(model);
删除选中节点或线 myDiagram.commandHandler.deleteSelection();

获取选中的节点或线

myDiagram.selection

 

 
  1. //用例获取选中的节点或线

  2. var nodeOrLinkList=myDiagram.selection;

  3. nodeOrLinkList.each(function(nodeOrLink) {

  4. console.log(nodeOrLink.data);

  5. });

  6. //获取第一个选中的节点或线

  7. var nodeOrLink=myDiagram.selection.first()

 

获取画布所有节点对象

myDiagram.nodes

 
  1. var nodes=myDiagram.nodes;

  2. //遍历输出节点对象

  3. nodes.each(function (node) {

  4. console.log(node.data.text);

  5. });

 

节点

 

添加节点 myDiagram.model.addNodeData(nodeData);
删除节点 myDiagram.model.removeNodeData(nodeData);
选中单个节点(不能批量选中) myDiagram.select(node);
更改属性值 myDiagram.model.setDataProperty(nodeData, 'color', "#ededed");

根据节点数据对象

更改节点属性

myDiagram.model.updateTargetBindings(nodeData);

 
  1. var nodeData = myDiagram.model.findNodeDataForKey('4.1');

  2. nodeData.text = "2333"

  3. nodeData.color = "#000000";

  4. myDiagram.model.updateTargetBindings(nodeData);

 

获取节点对象 var node=myDiagram.findNodeForKey('key');
获取节点data var nodeData=myDiagram.model.findNodeDataForKey('key');

批量删除节点

myDiagram.model.removeNodeDataCollection(nodes)

 
  1. var removeNodes = []; 

  2. var aNodeData = myDiagram.model.findNodeDataForKey('Akey');

  3. var bNodeData = myDiagram.model.findNodeDataForKey('Bkey');

  4. removeNodes.push(aNodeData );

  5. removeNodes.push(bNodeData);

  6. 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”的字符串

官网还有更多的匹配方式,这里就不列举了

 

 
  1. //注意值类型,字符串和数值,

  2. //如果json中是1.1,写成"1.1"就会查询不到

  3. var data={};

  4.    data.text="设计";

  5. // data.text=/设计/;

  6. // data.text=/设计/i;

  7. // data.text=/^设计/;

  8. // data.text=/设计$/;

  9. // data.text=/(勘|察)设计/;

  10. var nodes = myDiagram.findNodesByExample(data);

  11.     nodes.iterator.each(function (node) {

  12.       console.log(node.data);

  13. });

 

线

添加线 myDiagram.model.addLinkData(linkData);
删除线 myDiagram.model.removeLinkData(linkData);

批量删除线

{Array|iterator} removeLinks

removeLinkDataCollection(removeLinks);

 
  1. var removeLinks=[];

  2. //首先拿到这个节点的对象

  3. var node = myDiagram.findNodeForKey('key');

  4. //获取节点所有线

  5. node.findLinksConnected().each(function(link) { 

  6.      removeLinks.push(link.data);

  7.     }

  8.  );

  9. myDiagram.model.removeLinkDataCollection(removeLinks);

 

模糊获取线(版本1.68以上)

注意值类型,字符串和数值

myDiagram.findLinksByExample(data);

匹配 方式和模糊获取节点的规则一致

 
  1. //注意值类型,字符串和数值

  2. //如果json中是from:1.1,写成from:"1.1"就会查询不到

  3. var links=myDiagram.findLinksByExample({from:1.1, to:2.1});

  4. links.iterator.each(function (link) {

  5.      console.log(link.data);

  6. });

 

更改属性值 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();

 
  1. node.findTreeParentChain().each(function(pNode) {

  2. console.log(pNode.data)

  3. });

 

根据甲,找甲的子孙十八代(包括甲)

node.findTreeParts();

 
  1. node.findTreeParts().each(function(sNode) {

  2. console.log(sNode.data)

  3. });

 

根据甲,找甲的父亲

node.findTreeParentNode();  

var pNode=node.findTreeParentNode();  

根据甲,找甲的孩子们

node.findTreeChildrenNodes();

 
  1. node.findTreeChildrenNodes().each(function(cNode) {

  2. console.log(cNode.data)

  3. });

 

根据甲,获取甲和其孩子的关系 

node.findTreeChildrenLinks();

未测

 gojs操作画布常用API

 

  API 用例

addNodeData(节点对象);

addLinkData(线对象);

 
  1. var node = {};

  2. node["key"] = "节点Key";

  3. node["loc"] = "0 0";//节点坐标

  4. node["text"] = "节点名称";

  5. myDiagram.model.addNodeData(node);

 

removeNodeData(节点对象)

removeLinkData(线对象);

 
  1. //首先拿到这个节点的对象,这里直接通过节点的Key获取,

  2. //也可以通过各种事件的返回的对象中获取

  3. var nodeData = myDiagram.model.findNodeDataForKey('key');

  4. //删除单个节点

  5. myDiagram.model.removeNodeData(nodeData);

 

参数:

data:  nodeData或linkData

propname:属性名

val:修改的值

setDataProperty(data, propname, val);

 
  1. //首先拿到这个节点的data对象

  2. var nodeData = myDiagram.model.findNodeDataForKey('key');

  3. //然后对这个对象的属性进行更改,如果没有则新增这个属性

  4. myDiagram.model.setDataProperty(nodeData, 'color', "#ededed");

 

根据key获取节点data对象

findNodeDataForKey('节点key');

根据linkData模糊匹配线集合

(gojs1.68以上)

findLinksByExample(linkData)

 
  1. //根据Key获取节点数据对象

  2. var nodeData = myDiagram.model.findNodeDataForKey('key');

  3. //根据linkData,模糊匹配线集合,linkData可以为部分属性组成

  4. //如from:-1或to:-1,或者from:-1,to:-1

  5. var links=myDiagram.findLinksByExample({"from":-1, "to":-2});

  6. while (links.next()) {

  7. //遍历输出所有线数据对象

  8. console.log(links.value.data);

  9. }

 


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 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弄懂

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部