gojs 部分功能實現

最近作的項目用到了gojs，使用了一段時間發現其功能特別強大，先記錄下目前本身用到的把

1. 初始化畫布

myDiagram =

$(go.Diagram, "myDiagramDiv",
{
});

2. 定義node 模型

myDiagram.nodeTemplate =
$(go.Node, "Vertical",
{
locationObjectName: "ICON",
zOrder:1,
locationSpot: go.Spot.Center
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), //go.Binding 數據綁定 又分爲單向綁定和雙向綁定

$(go.Panel, "Spot",   //go.Panel 面板 至關與div裏面的外框把
$(go.Panel, "Auto",
{ name: "ICON" },
$(go.Shape,  //go.Shape 圖形  有一些基礎的圓 矩形 圓角矩形等 箭頭
{ fill: null, stroke:null,strokeWidth:2 },
new go.Binding("fill","isHighlighted", function(h) { return h ? "#B7D3F2" : "transparent"; }).ofObject()),
$(go.Picture,  //圖片
{desiredSize: new go.Size(30, 30), margin:3 },
new go.Binding("source", "type", nodeTypeImage ))
),
$(go.TextBlock,//文本框
{ alignment: go.Spot.TopRight, alignmentFocus: go.Spot.TopRight, //go.Spot.TopRight   至關於定位 在右上角
width: 50, height: 30,textAlign: "right",stroke: "#272822",font:"Bold 10px Helvetica"},
new go.Binding("text", "score"))
),

);

3.  定義線

myDiagram.linkTemplate 

4.自定義一些節點模型 , 要使用自定義的節點模型 須要在json里加上 "category":"自定義節點名", 

myDiagram.nodeTemplateMap.add("detail",

$(go.Node, "Horizontal"

));

5.節點點擊事件

var Select_Port = null;

myDiagram.addDiagramListener("ObjectSingleClicked", function(e) {
//Select_Port = e.subject.part.data.key;    e.subject.part.data即獲取到的data

});

6.畫布空白即背景點擊事件

myDiagram.addDiagramListener("BackgroundSingleClicked", function(e) {

});

7. 點擊放大縮小畫布

初始化畫布時 能夠設置

scale:0.7,
minScale:0.4,
maxScale:1.4

$(".enlarge").click(function(){
myDiagram.scale+=0.1;
})
$(".narrow").click(function(){
myDiagram.scale-=0.1;
})

8. 搜索節點

function searchDiagram() {
var input = document.getElementById("mySearch");
if (!input) return;
input.focus();

var regex = new RegExp(input.value, "i");

myDiagram.startTransaction("highlight search");
myDiagram.clearHighlighteds();

if (input.value) { 
var results = myDiagram.findNodesByExample({ text: regex }); // 根據須要搜索字段定義
myDiagram.highlightCollection(results);
if (results.count > 0) myDiagram.centerRect(results.first().actualBounds);
}

myDiagram.commitTransaction("highlight search");
}

搜索效果 經過isHighlighted 字段判斷

new go.Binding("fill","isHighlighted", function(h) { return h ? "#B7D3F2" : "#fff"; }).ofObject() 

9. 鷹眼功能 

<div id="myOverviewDiv"></div>

myOverview =
$(go.Overview, "myOverviewDiv",
{ observed: myDiagram, contentAlignment: go.Spot.Center });

10. 自定義group模型

myDiagram.groupTemplate =
$(go.Group, "Auto",
{
zOrder:1,
layout: $(go.GridLayout, //網格佈局
{ //angle: 90,
arrangement: go.GridLayout.LeftToRight,isRealtime: false, wrappingWidth:600 }), //wrappingWidth   最寬600px
isSubGraphExpanded: false,  //默認組是未展開的
locationSpot: go.Spot.Center,

subGraphExpandedChanged: function(group) { //子圖擴展變化
if (group.isSubGraphExpanded) { // 子圖展開
}
else {

}
}

},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, "Rectangle",
{ fill: "#ffffff",strokeWidth: 1 },
new go.Binding("stroke", "score", groupborder)
),
$(go.Placeholder,
{ padding: 10})

) // end Vertical Panel
); // end Group

11. 向 data 裏追加字段  本來獲取的json沒有score字段可是須要用到能夠追加進 nodeDataArray裏 方便使用

var model = myDiagram.model;
var arr = model.nodeDataArray;
for (var i = 0; i < arr.length; i++) {
datas = arr[i];
datas.score = Math.round(Math.random()*100);
model.updateTargetBindings(datas);
}

12 . 能夠給node加toolTip 實現鼠標移入提示想要顯示的數據

{ // this tooltip shows the name and picture of the kitten
toolTip:
$(go.Adornment, "Auto",
)
),
{padding:10}
) // end Adornment
})

 

未完待續。。。