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 ...
随机推荐
- springboot~Transactional注解的注意事项
@Transactional注解是为方法添加事务块的意思,使用aop的技术动态为方法添加事务范围,在使用它时可以在类或者方法上添加,但在类上添加时需要注意一下影响的范围. 类中添加Transactio ...
- PAT 1007 Maximum Subsequence Sum (最大连续子序列之和)
Given a sequence of K integers { N1, N2, ..., *N**K* }. A continuous subsequence is defined to be { ...
- 手把手教你使用Hexo+GitHub搭建自己的个人博客网站
安装nodejs环境 这个直接搜索安装即可,安装完成之后,通过如下命令检测环境变量是否安装成功: λ node -v # 输出版本号 v12.13.1 正确输入版本号即可. 安装cnpm cnpm是淘 ...
- 【转】教你怎么调用Gitlab API
官方文档: https://docs.gitlab.com/ce/api/ https://docs.gitlab.com/ee/api/branches.html#list-repository-b ...
- 洛谷 P3009 [USACO11JAN]利润Profits
嗯... 题目链接:https://www.luogu.org/problemnew/show/P3009 这是DP的另一个功能,求最大子段和(最大子段和模板:https://www.luogu.or ...
- SpringMVC中在Controller类的每个方法执行前调用某个方法的实现
在使用SpringMVC做项目的时候,如果想在@Controller类中每个@RequestMapping方法执行前都调用某个方法,要怎么实现呢?答案是使用Spring的@ModelAttribute ...
- mysql 官方读写分离方案
mysql 8.0 集群模式下的自动读写分离方案 问题 多主模式下的组复制,看起来挺好,起始问题和限制很多.而且中断一个复制就无法配置了 多主模式下,innodbcluster 等于是无用的,不需要自 ...
- Spring SpringMVC 和 Springboot 的关系(转载)
原文链接 spring boot就是一个大框架里面包含了许许多多的东西,其中spring就是最核心的内容之一,当然就包含spring mvc. spring mvc 是只是spring 处理web层请 ...
- JS闭包(1)
1.首先看一段代码: var a = 1; function fn1(){ var b = 2; function fn2(){ console.log(a); console.log(b); } } ...
- GIT使用教程——命令详解
$ git init 当前目录建立GIT可以管理的仓库(版本库),生成一个.git的隐藏文件夹 $ git add <filename> 将工作区的文件修改添加到版本库的暂存区 $ git ...