var node = {};
node["key"] = "节点Key";
node["loc"] = "0 0";//节点坐标
node["text"] = "节点名称";
// 添加节点 通过按钮点击，添加新的节点到画布
myDiagram.model.addNodeData(node);
if (myDiagram.commandHandler.canDeleteSelection()) {
// 删除选中节点或线，页面上有个按钮点击，可以删除选择的节点和线
myDiagram.commandHandler.deleteSelection();
return;
}
// 获得当前画布的json，获取当前画布的所有元素的json,用来保存
var model= myDiagram.model.toJson();
//model=eval('('+model+')');若格式异常抓一下
var nodes=model.nodeDataArray;取出所有节点
var Links=model.linkDataArray;取出所有线
// 加载json刷新画布，一般用来刷新和加载画布上的元素
model=myDiagram.model.toJson()
myDiagram.model = go.Model.fromJson(model);
// 通过节点key获取节点，知道节点key ,拿到这个节点的详细信息
var node = myDiagram.model.findNodeDataForKey('key');
var node = myDiagram.model.findNodeDataForKey('key');
//首先拿到这个节点的对象
myDiagram.model.setDataProperty(node, 'color', "#ededed");
//然后对这个对象的属性进行更改，更改节点属性值，更改节点的颜色，或者大小等
// 获取获得焦点的第一个元素，可为节点或者线
var node=myDiagram.selection.first();
console.log(node.data.key);//用例获取选中的节点或线var nodeOrLinkList=myDiagram.selection;nodeOrLinkList.each(function(nodeOrLink) {console.log(nodeOrLink.data);});
// 获取画布所有节点对象myDiagram.nodes获取所有获得焦点的节点
var items='';
for(var nit=myDiagram.nodes;nit.next();){
var node=nit.value;
if(node.isSelected){
items+=node.data.key+",";
}
}
console.log(items);
// 遍历整个画布的节点信息写法
for(var nit=myDiagram.nodes;nit.next();){
var node=nit.value;
var key=node.data.key;
var text=node.data.text;
}
// 给节点添加线
myDiagram.model.addLinkData({ from: "节点的Key", to: "连到另一节点的key" })// 删除线myDiagram.model.removeLinkData(linkData);
//批量删除线
{Array|iterator} removeLinks
removeLinkDataCollection(removeLinks);
var removeLinks=[];
//首先拿到这个节点的对象
var node = myDiagram.findNodeForKey('key');
//获取节点所有线
node.findLinksConnected().each(function(link) {
removeLinks.push(link.data);
}
);
myDiagram.model.removeLinkDataCollection(removeLinks);// 模糊获取线(版本1.68以上)注意值类型，字符串和数值 匹配 方式和模糊获取节点的规则一致
myDiagram.findLinksByExample(data);
//注意值类型，字符串和数值
//如果json中是from:1.1，写成from:"1.1"就会查询不到
var links=myDiagram.findLinksByExample({from:1.1, to:2.1});
links.iterator.each(function (link) {
console.log(link.data);
});
var newdata = { "text":"AAAA", "key":-33,"loc":"0 0" };
myDiagram.model.addNodeData(newdata);
var newdat2= myDiagram.model.findNodeDataForKey('-3');
console.log(newdat2);
var node = myDiagram.findNodeForData(newdat2);
console.log(node);
myDiagram.select(node);//选中节点
// 特殊案例API用法
myDiagram.findNodeForData(objNode);
myDiagram.findLinkForData(objLink);
// 其中objNode或者objLink,只能从画布的json 对象取出，不能直接手写例如
var newdata={"text":"AAAA","key":-33,"loc":"0 0"};
var node = myDiagram.findNodeForData(newdat2);
// 除了刚好是新建的节点外，，不然是获取不到这个对象的，因为添加节点时，gojs会自动给节点或者线添加一个属性
// 节点选中改变事件 selectionChanged: 回调的函数方法名
//该属性要写在$(go.Node,）内用大括号括起来
myDiagram.nodeTemplate =
$(go.Node, "Horizontal",
{ selectionChanged: nodeSelectionChanged },
//节点选中改变事件，nodeSelectionChanged为回调的方法名
$(go.Panel, "Auto",
$(go.Shape,//节点形状和背景颜色的设置
{ fill: "#1F4963" },
new go.Binding("fill", "color")
),
)
);//go.Node的括号
//回调方法 节点选中的时候是一种颜色，取消选中是另一种颜色
function nodeSelectionChanged(node) {
if(node.isSelected) {//
//节点选中执行的内容
console.log(node.data);//节点的属性信息
console.log(node.data.key);//拿到节点的Key,拿其他属性类似
var node1 = myDiagram.model.findNodeDataForKey(node.data.key);
myDiagram.model.setDataProperty(node1, "fill", "#ededed");
} else {
//节点取消选中执行的内容
var node1 = myDiagram.model.findNodeDataForKey(node.data.key);
myDiagram.model.setDataProperty(node1, 'fill', "1F4963 ");
}
}
// 节点双击事件
doubleClick : function(e, node){
//node为当前双击的节点的对象信息
}
//该属性要写在$(go.node,）内用大括号括起来
myDiagram.nodeTemplate =
$(go.Node, "Horizontal",
$(go.Panel, "Auto",
$(go.Shape,//节点形状和背景颜色的设置
{ fill: "#1F4963" },
new go.Binding("fill", "color")
),
{doubleClick : function(e, node){// 双击事件
handlerDC(e, node);//双击执行的方法
}
}
)
);//go.Node的括号
//双击执行的方法
function handlerDC(e, obj) {
var node = obj.part;//拿到节点的json对象，后面要拿什么值就直接.出来
var procTaskId = node.data.key;
var procTaskName = node.data.text;
var description = node.data.description;
var procTmplId = node.data.tmplId;
}
// 该例子主要应用场景为，双击节点，得到节点的详细信息，弹出窗口修改节点的信息
// 从Palette拖过来节触发的事件
myDiagram.addDiagramListener("externalobjectsdropped", function(e) {
console.log(e);
});
myDiagram.addDiagramListener("externalobjectsdropped", function(e) {
e.subject.each(function(n){
//得到从Palette拖过来的节点
console.log(n.data.key);
});
});
// 当前画布被拖动的节点 未测试
myDiagram.addDiagramListener("Modified", function(e) {
myDiagram.isModified = false;
iter = myDiagram.selection.iterator;
while (iter.next()) {
var part = iter.value;
if (part instanceof go.Link) {
if ( ( part.data.from == 0 || part.data.from == undefined) || ( part.data.to == 0 || part.data.to == undefined ) ) {
myDiagram.model.setDataProperty(part.data, 'link-color', 'red');
console.log(part.data);
console.log("非法");
} else if(part.data.from > 0 || part.data.from < 0 ) {
var node = myDiagram.findNodeForKey(part.data.from);
if (!node) {
console.log("非法");
}
}else if(part.data.to > 0 || part.data.to < 0 ) {
var node = myDiagram.findNodeForKey(part.data.to);
if (!node) {
console.log("非法");
}
}
}
}
var $ = go.GraphObject.make;
// 定义画布的基本属性 这里绑定画布所用的div,并保存在myDiagram中，后续的节点设置均使用这个变量，意思是在这个画布上定义节点和操作节点
myDiagram = $(go.Diagram, "myDiagram", //画布绑定的Div的ID
{
initialContentAlignment: go.Spot.Center, // 画布的位置设置（居中，靠左等）
allowDrop: true, // must be true to accept drops from the Palette
"LinkDrawn": showLinkLabel, //
"LinkRelinked": showLinkLabel,
"animationManager.duration": 600, // 画布刷新的加载速度
"undoManager.isEnabled": true, // "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
allowZoom: true // 允许缩放，false为否
isReadOnly: false // 是否禁用编辑 false否，
true是 //ismodelfied:true //禁止拖拽
});
// 定义单种节点
myDiagram.nodeTemplate=$(go.Node,***)
//***为对节点的定义
myDiagram.nodeTemplate =
$(go.Node, "Horizontal",
{ selectionChanged: nodeSelectionChanged },
//节点选中改变事件，nodeSelectionChanged为回调的方法名
$(go.Panel, "Auto",
$(go.Shape,//节点形状和背景颜色的设置
{ fill: "#1F4963", stroke: null }
),
$(go.TextBlock,
{ font: "bold 13px Helvetica, bold Arial, sans-serif",//字体
editable：true,
stroke: "white",//颜色
margin: 3 },
new go.Binding("text", "key")
)//go.TextBlock,的括号
)//go.Panel 的括号
);//go.Node的括号
// 定义多种节点(画布上有多种节点)
myDiagram.nodeTemplateMap.add("A种节点",$(go.Node,***))
//一种类型的节点
myDiagram.nodeTemplateMap.add("Start",
$(go.Node, "Spot",
$(go.Panel, "Auto",
$(go.Shape, "Circle", {
minSize: new go.Size(40, 40),
fill: "#79C900",
stroke: null
})
)
)//go.Node的括号
);
//另一种类型的节点
myDiagram.nodeTemplateMap.add("End",
$(go.Node, "Spot",
$(go.Panel, "Auto",
$(go.Shape, "Circle", {
minSize: new go.Size(40, 40),
fill: "#DC3C00",
stroke: null
})
)
)//go.Node的括号
);
//添加不同种类的节点
var node = {};
node["text"] = "2222";
node["key"] = "33";
node["loc"] = "0 0";
node["category"] = "Start";//category
myDiagram.model.addNodeData(node);
// 定义线
myDiagram.linkTemplate=$(go.Link,***);
//添加监听节点生成事件
myDiagram.addDiagramListener("externalobjectsdropped", function(e) {
e.subject.each(function(n){
console.log(n.data.key);
});
});
//添加监听线生成事件
myDiagram.addDiagramListener("LinkDrawn", function(e) {
console.log(e.subject.data.to);
})
//监听节点删除事件
myDiagram.addDiagramListener("SelectionDeleted", function(e) {
e.subject.each(function(n){
console.log(n.data.key);
});
})
//节点
//获取节点实际边界（宽高）
node.naturalBounds 返回值Rect(0,0,126,31)
//添加节点
myDiagram.model.addNodeData(nodeData);
//删除节点
myDiagram.model.removeNodeData(nodeData);
//选中单个节点或线
myDiagram.select(node);
//更改属性值
myDiagram.model.setDataProperty(nodeData, 'color', "#ededed");
//根据节点数据对象更改节点属性
myDiagram.model.updateTargetBindings(nodeData);
var nodeData = myDiagram.model.findNodeDataForKey('4.1');
nodeData.text = "2333"
nodeData.color = "#000000";
myDiagram.model.updateTargetBindings(nodeData);
//获取节点对象
var node=myDiagram.findNodeForKey('key');
//获取节点data
var nodeData=myDiagram.model.findNodeDataForKey('key');
//批量删除节点
myDiagram.model.removeNodeDataCollection(nodes)
var removeNodes = [];
var aNodeData = myDiagram.model.findNodeDataForKey('Akey');
var bNodeData = myDiagram.model.findNodeDataForKey('Bkey');
removeNodes.push(aNodeData );
removeNodes.push(bNodeData);
myDiagram.model.removeNodeDataCollection(removeNodes);
//模糊获取节点(版本1.68以上)注意值类型，字符串和数值
myDiagram.findNodesByExample(data);
匹配方式默认为===运算符进行比较。
/abc/ 匹配包含“abc”的任何字符串
/abc/i 匹配包含“abc”的任何字符串，忽略大小写
/^no/i 匹配任何以“no”开头的字符串，忽略大小写
/ism$/匹配任何以“ism”结尾的字符串
/(green|red) apple/ 匹配包含“green apple”或“red apple”的字符串
//注意值类型，字符串和数值，
//如果json中是1.1，写成"1.1"就会查询不到
var data={};
data.text="设计";
// data.text=/设计/;
// data.text=/设计/i;
// data.text=/^设计/;
// data.text=/设计$/;
// data.text=/(勘|察)设计/;
var nodes = myDiagram.findNodesByExample(data);
nodes.iterator.each(function (node) {
console.log(node.data);
});
//更改属性值
myDiagram.model.setDataProperty(linkData, 'from', "-2");
//获取节点的线
{string | null =} PID 端口ID
findLinksConnected(PID)
var node=myDiagram.findNodeForKey('key');
node.findLinksConnected().each(function(link) {console.log(link.data)});
//获取进入节点的线
{string | null =} PID 端口ID
findLinksInto(PID)
var node=myDiagram.findNodeForKey('key');
node.findLinksInto().each(function(link) {console.log(link.data)});
//获取从节点出来的线
{string | null =} PID 端口ID
findLinksOutOf(PID)
var node=myDiagram.findNodeForKey('key');
node.findLinksOutOf().each(function(link) {console.log(link.data)});
//获取A-B节点之间的线
{node } othernode B节点对象
{string | null =} PID 端口ID
{string | null =} otherPID B节点端口ID
findLinksBetween(othernode, PID, otherPID)
var nodeA=myDiagram.findNodeForKey('key');
var nodeB=myDiagram.findNodeForKey('key');
nodeA.findLinksBetween(nodeB).each(function(link) {console.log(link.data)});
//树节点
//根据甲，找甲的所有父级（包括甲）
node.findTreeParentChain();
node.findTreeParentChain().each(function(pNode) {
console.log(pNode.data)
});
//根据甲，找甲的所有子级（包括甲）
node.findTreeParts();
node.findTreeParts().each(function(sNode) {
console.log(sNode.data)
});
//根据甲，找甲的父亲
node.findTreeParentNode();
var pNode=node.findTreeParentNode();
//根据甲，找甲的孩子们
node.findTreeChildrenNodes();
node.findTreeChildrenNodes().each(function(cNode) {
console.log(cNode.data)
});
基础画布定义API
//画布初始位置
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: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
默认无限制 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
画布监听事件API
节点生成事件 externalobjectsdropped
线生成事件 LinkDrawn
线重新连接事件 LinkRelinked
删除后事件 SelectionDeleted
删除前事件 SelectionDeleting 例子入口
节点移动事件 SelectionMoved
//监听节点或线的删除事件
myDiagram.addDiagramListener("SelectionDeleted", function(e) {
e.subject.each(function(n){
console.log(n.data.key);
});
})
自动布局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;
}
}
});
});
