myDiagram.commandHandler.doKeyDown = function () { var e = myDiagram.lastInput; // Meta(Command)鍵代替Mac命令的「控制」 var control = e.control || e.meta; var key = e.key; //退出任何撤銷/重作組合鍵,具體鍵值根據需求而定 if(control &&(key === 'Z' || key === 'Y'))return ; //調用沒有參數的基礎方法(默認功能) go.CommandHandler.prototype.doKeyDown.call(this); };
myDiagram.addDiagramListener("LinkDrawn",function(e){ (e.subject.data ) //這是這個線條的數據 }) ; 同時要在linkTemplate 配置上 selectable: true,這樣 再監聽連線成功時 的回調中 調 myDiagram.commandHandler.deleteSelection() 才行 ,才能刪除這個連線。
myDiagram.toolManager.dragSelectingTool.box = $(go.Part, { layerName: "Tool", selectable: false }, $(go.Shape, { name: "SHAPE", fill: null, stroke: "chartreuse", strokeWidth: 3 }));
diagram.addModelChangedListener(function(evt) { // ignore unimportant Transaction events if (!evt.isTransactionFinished) return; var txn = evt.object; // a Transaction if (txn === null) return; // iterate over all of the actual ChangedEvents of the Transaction txn.changes.each(function(e) { // ignore any kind of change other than adding/removing a node if (e.modelChange !== "nodeDataArray") return; // record node insertions and removals if (e.change === go.ChangedEvent.Insert) { console.log(evt.propertyName + " added node with key: " + e.newValue.key); } else if (e.change === go.ChangedEvent.Remove) { console.log(evt.propertyName + " removed node with key: " + e.oldValue.key); } }); });
diagram.addModelChangedListener(function(evt) { // ignore unimportant Transaction events if (!evt.isTransactionFinished) return; var txn = evt.object; // a Transaction if (txn === null) return; // iterate over all of the actual ChangedEvents of the Transaction txn.changes.each(function(e) { // record node insertions and removals if (e.change === go.ChangedEvent.Property) { if (e.modelChange === "linkFromKey") { console.log(evt.propertyName + " changed From key of link: " + e.object + " from: " + e.oldValue + " to: " + e.newValue); } else if (e.modelChange === "linkToKey") { console.log(evt.propertyName + " changed To key of link: " + e.object + " from: " + e.oldValue + " to: " + e.newValue); } } else if (e.change === go.ChangedEvent.Insert && e.modelChange === "linkDataArray") { console.log(evt.propertyName + " added link: " + e.newValue); } else if (e.change === go.ChangedEvent.Remove && e.modelChange === "linkDataArray") { console.log(evt.propertyName + " removed link: " + e.oldValue); } }); });
grid: $(go.Panel, "Grid", $(go.Shape, "LineH", { stroke: "gray", strokeWidth: .5 }), $(go.Shape, "LineH", { stroke: "darkslategray", strokeWidth: 1.5, interval: 10 }), $(go.Shape, "LineV", { stroke: "gray", strokeWidth: .5 }), $(go.Shape, "LineV", { stroke: "darkslategray", strokeWidth: 1.5, interval: 10 }) ),
index.findNodesOutOf()
//拿到節點的下一級節點,其中須要根據count值去分別判斷count >1 和 count =1的狀況 ,大於1的話,下級節點在 bi.qd ,須要遍歷,等於1的話數據在 value.datahtml
index.findNodesInto()node
//拿到節點的上一級節點,其中須要根據count值去分別判斷count >1 和 count =1的狀況 ,大於1的話,上級節點在 bi.qd,須要遍歷 ,等於1的話數據在 value.datacanvas
myDiagram.findNodeForKey(key).data //key值是節點的keyapi
index.findLinksOutOf.xc.n[0].zd //n是個數組,裏面是全部線數組
myDiagram.model.updateTargetBindings(node.data)佈局
autoScrollRegion:0,
hasVerticalScrollbar:false,
hasHorizontalScrollbar:false學習
myDiagram.raiseChangedEvent(function(change, propertyname, obj, oldval, newval, oldparam, newparam){});this
this.selectedNodeprototype
canvas{border:0px;outline:none;}code
其餘可能須要注意的點:
一、一個節點下能夠有多個 panel ,一個panel下能夠用多個 go.Picture、go.Shape 、 go.TextBlock ,他們每一個下面都有固定的屬性值,可更改其樣式,具體參考 api。
二、當頁面新建了一些點和線後,選擇從新佈局的話可調用 myDiagram.layoutDiagram(true),而後圖譜會自動佈局。可是圖譜上要加上 layout: $(go.LayeredDigraphLayout, { isInitial: false, isOngoing: false, layerSpacing: 50 }) 這一屬性配置。