gojs經常使用API-畫布操做

時間  2019-12-10
標籤 gojs 經常 使用 api 畫布 简体版
原文   原文鏈接

畫布

獲取當前畫布的json myDiagram.model.toJson();
加載json刷新畫布 myDiagram.model = go.Model.fromJson(model);
刪除選中節點或線 myDiagram.commandHandler.deleteSelection();

獲取選中的節點或線javascript

myDiagram.selectionhtml

 

 

  1. //用例獲取選中的節點或線java

  2. var nodeOrLinkList=myDiagram.selection;node

  3. nodeOrLinkList.each(function(nodeOrLink) {json

  4. console.log(nodeOrLink.data);app

  5. });svg

  6. //獲取第一個選中的節點或線函數

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

 

獲取畫布全部節點對象設計

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.  
    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);

二、動態加線

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程