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 ...
随机推荐
- HTML 入门第一课
HTML 简单认识 HTML(HyperText Markup Language)即超文本标记语言,是一种用来制作超文本文档的简单标记语言,也是制作网页的最基本的语言,它可以直接由浏览器执行. 1.H ...
- 一个支持国密SM2/SM3/SM4/SM9/ZUC/SSL的密码工具箱
转:https://blog.csdn.net/xuq09/article/details/91815366 The GmSSL Project网址:http://gmssl.org/docs/qui ...
- Nexus-FEX基础配置
1.FEX基本配置feature fex fex 100 pinning max-links 1 >>>>该值默认就是1 description "FEX100 ...
- Java学习资源 - 其他
http请求HttpServletRequest详解 HttpServletRequest请求转发 高并发场景下的httpClient优化使用 HttpClien高并发请求连接池 - PoolingH ...
- Educational Codeforces Round 80 C. Two Arrays（组合数快速取模）
You are given two integers nn and mm . Calculate the number of pairs of arrays (a,b)(a,b) such that: ...
- 关于python 3.x import matplotlib as plt ImportError: DLL load failed: 找不到指定的模块
windows 10下使用conda update --all更新过后,就出现这样的问题了,各种包不能用了,然后在stackoverflow上搜到有人也遇到相同的问题,并通过其中的回答找到了原因,这里 ...
- 【网寻】IE F12 后报错，无法查看 DOM 等信息
错误图片: 解决办法 : 安装Windows7补丁:KB3008923: 补丁下载地址: http://www.microsoft.com/en-us/download/details.aspx?id ...
- 设计模式课程 设计模式精讲 4-2 简单工厂coding
1 代码演练 1.1 未使用简单工厂模式代码 1.2 使用简单工厂模式 1.3 使用反射机制简单工行模式 1 代码演练 1.1 未使用简单工厂模式代码 测试类: package com.geely.d ...
- Python开发个人专属表情包网站
“表情包”是一种利用图片来表示感情的一种方式.表情包是在社交软件活跃之后,形成的一种流行文化,表情包流行于互联网上面,基本人人都会发表情. 曾经你是否也有过找不到表情包去应对别人的时候. 今天小编分享 ...
- 工具 - VS Code
杂项 1. 主题 brackets light pro, One Monokai theme 2. directory tree indent guidelines, directory vertic ...