GoJS实例4
此示例更改链接数据的“to”属性，使链接连接到不同的节点.复制如下内容保存到空白的.html文件中，用浏览器打开即可查看效果
<!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 $ = go.GraphObject.make;
var diagram = new go.Diagram("myDiagramDiv");
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() {
var model = diagram.model;
// 所有模型更改都应在事务中发生
model.startTransaction("reconnect link");
var data = model.linkDataArray[0]; // 获取第一个链接数据
if (model.getToKeyForLinkData(data) === "Beta") {
model.setToKeyForLinkData(data, "Gamma");
} else {
model.setToKeyForLinkData(data, "Beta");
}
model.commitTransaction("reconnect link");
} function loop() {
setTimeout(function () {
switchTo();
loop();
}, 1000);
}
loop();
</script>
</body> </html>
此示例点击不同的节点转换颜色.复制如下内容保存到空白的.html文件中，用浏览器打开即可查看效果
<!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 $ = go.GraphObject.make;
var diagram = new go.Diagram("myDiagramDiv");
diagram.nodeTemplate =
$(go.Node, "Auto", {
selectionAdorned: false
}, // no blue selection handle!
$(go.Shape, "RoundedRectangle", {
fill: "white"
},
// bind Shape.fill to Part.isSelected converted to a color
new go.Binding("fill", "isSelected", function (sel) {
return sel ? "dodgerblue" : "lightgreen";
}).ofObject()), // no name means bind to the whole Part
$(go.TextBlock, {
margin: 5
},
new go.Binding("text", "descr"))
); diagram.model.nodeDataArray = [{
descr: "Select me!"
},
{
descr: "I turn blue when selected."
}
];
</script>
</body> </html>
移动节点.复制如下内容保存到空白的.html文件中，用浏览器打开即可查看效果
<!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>
<p id="bindTwoWayData" onclick='shiftNode()'></p>
<script>
//为了简洁
var $ = go.GraphObject.make;
var diagram = new go.Diagram("myDiagramDiv");
diagram.nodeTemplate =
$(go.Node, "Auto", {
locationSpot: go.Spot.Center
},
new go.Binding("location", "loc").makeTwoWay(), // 双向绑定
$(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(0, 0)
}];
diagram.model = new go.GraphLinksModel(nodeDataArray); shiftNode = (function () { //定义一个名为"shiftNode"的回调函数，当点击时触发
// 所有的model中做出的改变都应该在事务中
diagram.startTransaction("shift node");
var data = diagram.model.nodeDataArray[0]; // get the first node data
var node = diagram.findNodeForData(data); // find the corresponding Node
var p = node.location.copy(); // make a copy of the location, a Point
p.x += 20;
if (p.x > 200) p.x = 0;
// changing the Node.location also changes the data.loc property due to TwoWay binding
node.location = p;
// show the updated location held by the "loc" property of the node data
document.getElementById("bindTwoWayData").textContent = data.loc.toString();
diagram.commitTransaction("shift node");
});
shiftNode(); // initialize everything
</script>
</body> </html>
GoJS实例4的更多相关文章
- GoJS实例1
复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果 <!DOCTYPE html> <html> <head> <meta charset=& ...
- GoJS实例3
复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果 <!DOCTYPE html> <html> <head> <meta charset=& ...
- GoJS实例2
复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果 <!DOCTYPE html> <html> <head> <meta name=&quo ...
- GoJS最简单的实例
复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果 <!DOCTYPE html> <html> <head> <meta charset=& ...
- GoJS 友情链接
目前GoJS官网是学习gojs的最佳选择 GOJS简单示例 GoJS API学习 GoJS组织结构图2 mind map思维导图 组织结构图 GoJS实例1 GoJS实例2 GoJS实例3 GoJS实 ...
- GoJS简单示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 最近学习工作流 推荐一个activiti 的教程文档
全文地址:http://www.mossle.com/docs/activiti/ Activiti 5.15 用户手册 Table of Contents 1. 简介 协议 下载 源码 必要的软件 ...
- JS组件系列——Gojs组件，前端图形化插件之利器
前言:之前分享过两篇关于流程画图的前端组件,使用的jsPlumb.这个组件本身还不错,使用方便.入门简单.轻量级,但是使用一段时间下来,发现一些弊病,比如组件不太稳定,初始进入页面的时候连线的样式有时 ...
- JS图形化插件利器组件系列 —— Gojs组件
阅读目录 一.组件效果预览 二.初次接触 1.Gojs简介 2.使用入门 三.综合效果 1.自定义流程的使用 2.工业流程图 四.总结 正文 前言:之前分享过两篇关于流程画图的前端组件,使用的jsPl ...
随机推荐
- Markdown 语法使用
Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式.Markdown的语法简洁明了.学习容易,而且功能比纯文本更强,被广泛的应用在博客写 ...
- jsp 防止表单多次提交
1:首先java 后台代码生成一个token,然后保存到jsp 页面的一个隐藏控件并且保存到set session中 */ @RequestMapping("/yuDengJi") ...
- ARM CORTEX-M3 内核架构理解归纳
ARM CORTEX-M3 内核架构理解归纳 来源:网络 个人觉得对CM3架构归纳的非常不错,因此转载 基于<ARM-CORTEX M3 权威指南>做学习总结: 在我看来,Cotex-M3 ...
- wikipedia
1. 维基百科 2. 更多维基项目 3. 有关维基百科的电影列表 4. 维基软件 5. 维基百科相关列表 6. 其他知识分享列表 7. 补充:维基百科使用中好用的关键字 1. 维基百科 https:/ ...
- SpringBoot图文教程3—「‘初恋’情结」集成Jsp
有天上飞的概念,就要有落地的实现 概念+代码实现是本文的特点,教程将涵盖完整的图文教程,代码案例 文章结尾配套自测面试题,学完技术自我测试更扎实 概念十遍不如代码一遍,朋友,希望你把文中所有的代码案例 ...
- .Net后台实现微信APP支付
上一节分享了微信小程序支付的后台,这一节来分享一下微信APP支付的后台.微信APP支付和微信小程序差别不大,微信APP支付后台不需要微信登录凭证.后台下单时交易类型(trade_type)不再是&qu ...
- window查看连接过的无线密码
for /f "skip=9 tokens=1,2 delims=:" %i in ('netsh wlan show profiles') do @echo %j | find ...
- “嘭、嘭、嘭”---C/S架构下的心跳机制
本人想使用AU3开发多客户端.一服务端.需要使用到心跳机制,即 在线状态实时更新以及掉线自动重连. 搜索网络发现没有人用AU3写心跳机制. 下面是一篇转帖(原文地址:http://www.cnblog ...
- 让tableView的高度等于contentSize的高度、动态调整tableView的高度、tableView的高度自适应布局
文章概要: 1.简介下,tableView中的内容如何高度自适应的布局 2.如何做到让tableView的高度动态调整 还是看图作文吧- 首先,tableView的高度就是用户能够看见里面更大世界的那 ...
- LeetCode刷题笔记和想法（C++）
主要用于记录在LeetCode刷题的过程中学习到的一些思想和自己的想法,希望通过leetcode提升自己的编程素养 :p 高效leetcode刷题小诀窍(这只是目前对我自己而言的小方法,之后会根据自己 ...