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 ...
随机推荐
- 每个JavaScript开发人员应该知道的33个概念
每个JavaScript开发人员应该知道的33个概念 介绍 创建此存储库的目的是帮助开发人员在JavaScript中掌握他们的概念.这不是一项要求,而是未来研究的指南.它基于Stephen Curti ...
- PyQt5程序基本结构分析
面向过程版 # 0. 导入需要的包和模块 from PyQt5.Qt import * # 包含了我们常用的QT中的一些类 import sys # 一个内置的模块,系统相关操作 # 代码执行的时候, ...
- WLC Crash采集什么信息？
WLC和思科的路由器交换机不同,Cisco的WLC采用的是AireOS. 如果WLC crash或无故重启,可以尝试采集如下信息: AireOS WLC version 8.0.140.0 or hi ...
- C++ STL之栈stack和queue的使⽤
写在最前面,本文摘录于柳神笔记: (1)栈 stack 在头⽂件 #include 中,是数据结构⾥⾯的栈-以下是常⽤⽤法: (2)队列 queue 在头⽂件 #include 中,是数据结构⾥⾯的队 ...
- input和button 高度不一致问题
原因是 input和button的高度计算不一样, input高度不包括border. button高度包括border. 解决方法: 1.box-sizing:border-box: 2.borde ...
- 实验一  GIT 代码版本管理
实验一 GIT 代码版本管理 实验目的: 1)了解分布式分布式版本控制系统的核心机理: 2) 熟练掌握git的基本指令和分支管理指令: 实验内容: 1)安装git 2)初始配置git ,git ...
- redhat7.6 AIDE 系统文件完整性检查工具
1.安装AIDE yum install aide 安装完的配置文件,在/etc/aide.conf 自定义/etc/aide.conf 下面我写了对 /data/data1 目录做CONTE ...
- CSS Sprite精灵图如何缩放大小
transform:scale( x ): 语法为:transform: scale(x,y). 同时有scaleX, scaleY专门的x, y方向的控制. 例如:transform: scale( ...
- 为kubernetes-dashboard页面增加过期时间,减少登录次数.
方法很多,最简单的就是登录后,找到Deployments 服务, 右侧界面会出现kubernetes-dashboard的项目,如果没出现,那么在namespace那里选择全部名称空间. ports: ...
- 「JSOI2010」满汉全席
前言 由于蒟蒻才刚开始学 \(\text{2-SAT}\),所以题解中有的地方可能不够精炼,望多包涵! 题目描述 题目意思很简单,标准的\(\text{2-SAT}\)问题模型.那么我们就先来介绍一下 ...