最近做的項目用到了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
})

?

未完待續。。。 ?

?

轉載于:https://www.cnblogs.com/xiaorong-9/p/7018825.html

總結

以上是生活随笔為你收集整理的gojs 部分功能实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。