GoJS简单示例
<!DOCTYPE html> <html> <head>
<meta charset="utf-8">
<title>GoJS实例--修改节点名称</title>
<style>
#myDiagramDiv {
width: 400px;
height: 500px;
background-color: #DAE4E4;
}
</style>
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
</head> <body>
<div id="myDiagramDiv"></div> <script>
var diagram = new go.Diagram("myDiagramDiv");
var $ = go.GraphObject.make;
diagram.add(
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle", {
fill: "lightblue"
}),
$(go.TextBlock, "修改节点名称", {
margin: 5
})
)); diagram.nodeTemplate =
$(go.Node, "Auto",
{ locationSpot: go.Spot.Center },
$(go.Shape, "RoundedRectangle",
{ // default values if the data.highlight is undefined:
fill: "yellow", stroke: "orange", strokeWidth: 2
},
new go.Binding("fill", "highlight", function (v) { return v ? "pink" : "lightblue"; }),
new go.Binding("stroke", "highlight", function (v) { return v ? "red" : "blue"; }),
new go.Binding("strokeWidth", "highlight", function (v) { return v ? 3 : 1; })),
$(go.TextBlock,
{ margin: 5 },
// 注意，这里绑定后才能修改值
new go.Binding("text", "name"))
); diagram.model.nodeDataArray = [
{ key: "Alpha", name: "how are you?", highlight: false } // just one node, and no links
]; function flash() {
// all model changes should happen in a transaction
diagram.model.commit(function (m) {
var data = m.nodeDataArray[0]; // get the first node data
m.set(data, "highlight", !data.highlight);
console.log(data);
// 修改节点数据对象上的“name”值,注意这里能修改是因为定义了Binding：new go.Binding("text", "name")
m.set(data, "name", 'I am doing well');
}, "flash");
}
function loop() {
setTimeout(function () { flash(); loop(); }, 2000);
}
loop();
</script>
</body>
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>GoJS实例--改变箭头</title>
<style>
#myDiagramDiv {
width: 400px;
height: 500px;
background-color: #DAE4E4;
}
</style>
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
</head> <body>
<div id="myDiagramDiv"></div> <script>
var diagram = new go.Diagram("myDiagramDiv");
var $ = go.GraphObject.make;
diagram.add(
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle", {
fill: "lightblue"
}),
$(go.TextBlock, "GoJS实例--改变箭头", {
margin: 5
})
)); diagram.nodeTemplate =
$(go.Node, "Auto",
{ locationSpot: go.Spot.Center },
$(go.Shape, "RoundedRectangle",
{ fill: "yellow", stroke: "orange", strokeWidth: 2 }),
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text", "key"))
); var nodeDataArray = [
{ key: "Alpha" },
{ key: "Beta" },
{ key: "Gamma" }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray); function switchTo() {
// all model changes should happen in a transaction
diagram.model.commit(function(m) {
var data = m.linkDataArray[0]; // get the first link data
if (m.getToKeyForLinkData(data) === "Beta")
m.setToKeyForLinkData(data, "Gamma");
else
m.setToKeyForLinkData(data, "Beta");
}, "reconnect link");
}
function loop() {
setTimeout(function() { switchTo(); loop(); }, 1000);
}
loop();
</script>
</body>
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>GoJS实例--选中节点改变填充颜色</title>
<style>
#myDiagramDiv {
width: 400px;
height: 500px;
background-color: #DAE4E4;
}
</style>
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
</head> <body>
<div id="myDiagramDiv"></div> <script>
var diagram = new go.Diagram("myDiagramDiv");
var $ = go.GraphObject.make;
diagram.add(
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle", {
fill: "lightblue"
}),
$(go.TextBlock, "GoJS实例--选中节点改变填充颜色", {
margin: 5
})
)); diagram.nodeTemplate =
$(go.Node, "Auto",
{ selectionAdorned: false }, // no blue selection handle!
$(go.Shape, "RoundedRectangle",
// bind Shape.fill to Node.isSelected converted to a color
new go.Binding("fill", "isSelected", function(sel) {
return sel ? "dodgerblue" : "lightgray";
}).ofObject()), // no name means bind to the whole Part
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text", "descr"))
); diagram.model.nodeDataArray = [
{ descr: "点我变蓝" },
{ descr: "选我变蓝" }
];
</script>
</body>
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>GoJS实例--改变共享颜色</title>
<style>
#myDiagramDiv {
width: 400px;
height: 500px;
background-color: #DAE4E4;
}
</style>
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
</head> <body>
<div id="myDiagramDiv"></div>
<button id="zoomToFit" onclick="changeColor()">点我改变共享的颜色</button>
<script>
var diagram = new go.Diagram("myDiagramDiv");
var $ = go.GraphObject.make;
diagram.add(
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle", {
fill: "lightblue"
}),
$(go.TextBlock, "GoJS实例--改变共享颜色", {
margin: 5
})
)); diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle",
{ fill: "white" }, // the default value if there is no modelData.color property
new go.Binding("fill", "color").ofModel()), // meaning a property of Model.modelData
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text"))
);
// start all nodes yellow
diagram.model.modelData.color = "yellow"; diagram.model.nodeDataArray = [
{ text: "Alpha" },
{ text: "Beta" }
]; diagram.undoManager.isEnabled = true; changeColor = function () { // define a function named "changeColor" callable by button.onclick
diagram.model.commit(function (m) {
// alternate between lightblue and lightgreen colors
var oldcolor = m.modelData.color;
var newcolor = (oldcolor === "lightblue" ? "lightgreen" : "lightblue");
m.set(m.modelData, "color", newcolor);
}, "changed shared color");
}
</script>
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GoJS实例--TwoWay Binding双向数据绑定</title>
<style>
#myDiagramDiv {
width: 400px;
height: 500px;
background-color: #DAE4E4;
}
</style>
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
</head> <body>
<div id="myDiagramDiv"></div>
<button id="xxx" onclick="shiftNode()">改变节点位置</button>
<script>
var diagram = new go.Diagram("myDiagramDiv");
var $ = go.GraphObject.make;
diagram.add(
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle", {
fill: "lightblue"
}),
$(go.TextBlock, "GoJS实例--TwoWay Binding双向数据绑定，\n此例可用于外部页面改变节点样式", {
margin: 5
})
)); diagram.nodeTemplate =
$(go.Node, "Auto",
{ locationSpot: go.Spot.Center },
new go.Binding("location", "loc").makeTwoWay(), // TwoWay Binding
$(go.Shape, "RoundedRectangle",
{ fill: "lightblue", stroke: "blue", strokeWidth: 2 }),
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text", "key"))
); var nodeDataArray = [
{ key: "Alpha", loc: new go.Point(90, 90) }
];
diagram.model = new go.GraphLinksModel(nodeDataArray); shiftNode = (function() { // 定义一个名为“shiftNode”的函数，该函数由button.onclick调用
// 所有的模型变更都应该发生在一个事务中
diagram.commit(function(d) {
var data = d.model.nodeDataArray[0]; // get the first node data
var node = d.findNodeForData(data); // 查找对应节点
var p = node.location.copy(); // 复制一个位置，一个点
p.x += 10;
if (p.x > 200) p.x = 0;
// ：改变节点.位置也会改变数据. 双向绑定loc属性
node.location = p;
// 显示由节点数据的“loc”属性持有的更新位置
document.getElementById("bindTwoWayData").textContent = data.loc.toString();
}, "shift node");
});
shiftNode(); // initialize everything
</script>
</body>
GoJS简单示例的更多相关文章
- Linux下的C Socket编程 -- server端的简单示例
Linux下的C Socket编程(三) server端的简单示例 经过前面的client端的学习,我们已经知道了如何创建socket,所以接下来就是去绑定他到具体的一个端口上面去. 绑定socket ...
- C# 构建XML（简单示例）
C# 构建XML的简单示例: var pars = new Dictionary<string, string> { {"url","https://www. ...
- 根据juery CSS点击一个标签弹出一个遮罩层的简单示例
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- ACEXML解析XML文件——简单示例程序
掌握了ACMXML库解析XML文件的方法后,下面来实现一个比较完整的程序. 定义基本结构 xml文件格式如下 <?xml version="1.0"?> <roo ...
- demo工程的清单文件及activity中api代码简单示例
第一步注册一个账户,并创建一个应用.获取app ID与 app Key. 第二步下载sdk 第三步新建工程,修改清单文件,导入相关的sdk文件及调用相应的api搞定. 3.1 修改清单文件,主要是加入 ...
- spring-servlet.xml简单示例
spring-servlet.xml简单示例 某个项目中的spring-servlet.xml 记下来以后研究用 <!-- springMVC简单配置 --> <?xml versi ...
- SignalR 简单示例
一.什么是 SignalR ASP.NET SignalR is a library for ASP.NET developers that simplifies the process of add ...
- Web API 简单示例
一.RESTful和Web API Representational State Transfer (REST) is a software architecture style consisting ...
- XML引入多scheme文件约束简单示例
XML引入多scheme文件约束简单示例,用company.xsd和department.xsd来约束company.xml: company.xsd <?xml version="1 ...
随机推荐
- 批量给文件加一个后缀 .bak , 一条命令去掉文件的后缀 linux
给当前文件夹下面的所有文件加上一个后缀 == 一条命令解决 ll | awk '{print $9}' | grep -v '^[ ]*$' |sed -r 's#(.*)#mv \1 \1.bak# ...
- 创建mysql数据库,在新数据库中创建表，再尝试删除表
创建之前,先登录数据库存 mysql -u 账号 -p密码 登录完成后,展示一下已存在的数据库 show databases; 创建数据库 create database test111; 然后展示一 ...
- element table批量删除
很小的一个问题,但是有细节需要注意 (1)问题:在起初我写的时候是根据元素的name是否相同判断是否是同一个节点,出现的问题就是,如果说两个元素的name相同,就会判断出错 (2)代码: <te ...
- ➡️➡️➡️IELTS Listening
目录 src numbers and letters src https://ielts-simon.com/ielts-help-and-english-pr/ielts-listening/ nu ...
- 【PAT甲级】1002 A+B for Polynomials (25 分)
题意:给出两个多项式,计算两个多项式的和,并以指数从大到小输出多项式的指数个数,指数和系数. AAAAAccepted code: #include<bits/stdc++.h> usin ...
- 树莓派4B踩坑指南 - （9）安装Git和Docker
安装Git sudo apt-get install wget git-core 安装Docker curl -sSL https://get.docker.com | sh # 树莓派专属脚本福利, ...
- 研究Zookeeper的原理（二）
阅读声明:以下内容是结合网上材料及工作内容所写的个人理解,如有不当,欢迎大家指正~~~谢谢啦 一.ZooKeeper的选举机制.FailOver机制 我们知道ZooKeeper在分布式环境中协调服务, ...
- Windows平台VC++ 6.0 下的网络编程学习 - 简单的测试winsock.h头文件
最近学习数据结构和算法学得有点累了(貌似也没那么累...)...找了本网络编程翻了翻当做打一个小基础吧,打算一边继续学习数据结构一边也看看网络编程相关的... 简单的第一次尝试,就大致梳理一下看书+自 ...
- Redis 作为windows服务运行
如果服务器上以控制台方式运行Redis服务,非常不方便,不小心会被人点击关闭,到时服务就挂了. 使用 命令的方式,将配置加载到windows服务,执行后无法启动,提示配置问题. redis-serve ...
- Python 基础之正则之二 匹配分组,正则相关函数及表达式修饰符
四.匹配分组 [元字符] 分组符号 a|b 匹配字符a 或 字符b (如果两个当中有重合部分,把更长的那个放前面) (ab) 匹配括号内的表达式 ,将()作为一个分组 num 引用分组 ...