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 ...
随机推荐
- Python：时间日历基本处理
time 模块 提供了处理时间和表示之间转换的功能 获取当前时间戳 时间戳:从0时区的1970年1月1日0时0分0秒,到所给定日期时间的时间,浮点秒数,或者毫秒整数 获取方式: import time ...
- 【快学SpringBoot】快速上手好用方便的Spring Cache缓存框架
前言 缓存,在开发中是非常常用的.在高并发系统中,如果没有缓存,纯靠数据库来扛,那么数据库压力会非常大,搞不好还会出现宕机的情况.本篇文章,将会带大家学习Spring Cache缓存框架. 原创声明 ...
- 解决mysql和navicat乱码问题
1,首先进入mysql的my.ini文件,进行编码修改,全部改成utf8编码(这里就不赘述了,网上一搜一堆) 2,最重要的一点,把原先navicat创建的连接断开,重新创建新连接,在该新连接下创建库, ...
- yaml服务部署示例
apiVersion: apps/v1kind: Deploymentmetadata: name: igirl namespace: chaolai labels: app: igirl ...
- wx小程序笔记
目录 p18 事件绑定1 p19 事件绑定2 btn p20+ view 相关,wxss,less,css 零基础玩转微信小程序[黑马程序员] https://www.bilibili.com/vid ...
- SpringBoot学习笔记（一）——构建springboot项目
生成一个SpringBoot的项目 开发和学习SpringBoot需要一个生成好的SpringBoot项目. 1.可以使用一些IDE(Integrated Development Environmen ...
- typeof方法重写（区分数组对象）
为什么要重写typeof方法? typeof 可以准确的判断除object以外的基础数据类型,但不能区分object类型的具体类型,比如 Array .Date.NULL.NaN 以及自定义类. 观察 ...
- [python] pygame安装与配置
参考 https://www.runoob.com/python/python-install.html https://blog.csdn.net/huayuhuan/article/details ...
- springboot中关于datasource的配置
datasource spring.dao.exceptiontranslation.enabled: 是否开启PersistenceExceptionTranslationPostProcessor ...
- MySQL更改默认的root账户密码
编辑mysql的配置文件:my.ini(在MySql安装目录下). 打开配置文件,在文件最后一行添加:skip-grant-tables,然后保存退出 意思为就是在启mysql时不启动grant-ta ...