持續更新中
- 基礎畫布定義API
畫布節點連線定義validCycle，可能理解有誤，有問題麻煩誤留言矯正,慢慢測中，先留個位置畫布初始位置 initialContentAlignment: go.Spot.Center, 畫布位置,定義後就不能拖動畫布了，畫布位置交由gojs管理 contentAlignment:go.Spot.Center, 初始座標 initialPosition: new go.Point(0, 0) 禁止移動節點 allowMove:false 禁止複製 allowCopy: false 禁止刪除 allowDelete:false 禁止選中 allowSelect:false 禁止縮放 allowZoom: false 禁止撤銷和重做 "undoManager.isEnabled": false 禁止水平拖動畫布
禁止水平滾動條allowHorizontalScroll: false 禁止垂直拖動畫布
禁止垂直滾動條
allowVerticalScroll: false 只讀 isReadOnly: true 畫布初始化動畫時間 "animationManager.duration": 600 禁止畫布初始化動畫 "animationManager.isEnabled": false 畫布比例 scale:1.5 畫布比例自適應
autoScale
autoScale:go.Diagram.Uniform,//自適應
autoScale:go.Diagram.UniformToFill,//自適應
autoScale:go.Diagram.None,//默認值不自適應
畫布最小比例 minScale:1.2, 畫布最大比例 maxScale:2.0, 顯示網格 "grid.visible":true, 畫布邊距padding padding:80或者new go.Margin(2, 0)或new go.Margin(1, 0, 0, 1)
畫布節點連線定義
validCycle:go.Diagram.CycleDestinationTree 只允許有一個父節點
validCycle:go.Diagram.CycleNotUndirected
validCycle:go.Diagram.CycleNotDirected
validCycle:go.Diagram.CycleSourceTree
禁止鼠標拖動區域選中dragSelectingTool "dragSelectingTool.isEnabled" : false,
或者在畫布對象myDiagram創建後再調用
myDiagram.toolManager.dragSelectingTool.isEnabled = false ;
默認無限制 validCycle:go.Diagram.CycleAll 節點之間連線隨便連 一個節點只允許有一個父節點，並且沒有定向循環（僅允許維護樹結構的鏈接）
validCycle:go.Diagram.CycleDestinationTree 禁止A→C,B→C
節點的有效鏈接不會在圖中產生有向循環 validCycle:go.Diagram.CycleNotDirected
禁止A-B-C-A 節點的有效鏈接不會在圖中產生無向循環 validCycle:go.Diagram.CycleNotUndirected
？？？測不出來 一個節點只允許有一個子節點並且沒有定向循環。 validCycle:go.Diagram.CycleSourceTree 禁止A→B,A→C 補充常見問題，如何自定義Node key的生成規則，如何給link 添加Key
-
key 在json中鍵名 修改
在myDiagram.model創建時，或創建後用
例如 myDiagram.model.nodeKeyProperty="id";myDiagram.model.linkKeyProperty="id" 或者
myDiagram.model = $(go.GraphLinksModel, {nodeKeyProperty: "id", linkKeyProperty: "id", nodeDataArray:[], linkDataArray:[] } ); -
自定義key 的生成規則
node
//如果有Palette，並且不保了第一個key ,所以key 都要通過自定義生成需要設置 myDiagram.model.copiesKey=false; myDiagram.model.makeUniqueKeyFunction = function(model, data) { var i = model.nodeDataArray.length * 2 + 1; //簡單的判斷生成key while(model.findNodeDataForKey(i) !== null) i += 2; return i; };link 給link 添加key 需要先定義linkKeyProperty,再設置link key 生成規則
//先定義linkKeyProperty myDiagram.model.linkKeyProperty = "key"; //再設置linkKey規則 myDiagram.model.makeUniqueLinkKeyFunction = function(model, data) { var i = model.linkDataArray.length * 2 + 2; while(model.findLinkDataForKey(i) !== null) i += 2; return i; };
- 畫布監聽事件API，圖表事件中文API
節點生成事件 externalobjectsdropped 線生成事件 LinkDrawn 線重新連接事件 LinkRelinked 刪除後事件 SelectionDeleted 刪除前事件 SelectionDeleting 例子入口 節點移動事件 SelectionMoved //監聽節點或線的刪除事件 myDiagram.addDiagramListener("SelectionDeleted", function(e) { e.subject.each(function(n){ console.log(n.data.key); }); }) - 自動佈局API
PS:這裏只寫比較常用佈局，其他佈局請查詢官網API網格佈局 go.GridLayout 力導向佈局 go.ForceDirectedLayout 樹形佈局 go.TreeLayout 徑向佈局(需要引RadialLayout.js) RadialLayout //用例定義畫布節點爲網格佈局 myDiagram = $(go.Diagram, "myDiagramDiv", // 畫布定義 {layout:$(go.GridLayout, //自動佈局定義，設置爲網格佈局 { comparer: go.GridLayout.smartComparer,//設置從小到大排序 spacing: go.Size.parse("20 20"),//設置節點間隔 comparer: function(a, b){ //重寫佈局算法,根據其他屬性值重新增設置順序 var ay = a.data.type; var by = b.data.type; if(!!ay&&!!by){ if(ay > by) return -1; if(ay < by) return 1; }else if(!!ay){ return -1; }else if(!!by){ return 1; } } }); });
略