最近做的项目用到了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
})
未完待续。。。
