gojs常用API-diagram图表操作

11 篇文章 2 订阅
6 篇文章 1 订阅

持续更新中,暂时就不写案例了
。。。虽然写得不乍地,转载请附上源链接啊

PS:在本文中,node为节点对象,node.data为节点数据

画布

获取当前画布的jsonmyDiagram.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);
});

 

节点 node中文文档入口

获取节点实际边界(宽高)node.naturalBounds 返回值Rect(0,0,126,31)
添加节点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');
获取节点datavar 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

findLinksBetween(othernode, PID, otherPID)

var nodeA=myDiagram.findNodeForKey('key');

var nodeB=myDiagram.findNodeForKey('key');

nodeA.findLinksBetween(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();

未测

 

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值