GoJS实例3
复制如下内容保存到空白的.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://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<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", //形状自动填充适合
$(go.Shape, "RoundedRectangle", // 使用圆角长方形
// 将Shape.fill绑定到Node.data.color
new go.Binding("fill", "color")),
$(go.TextBlock, {
margin: 3 //文字的间距
},
// 将TextBlock.text绑定到Node.data.key
new go.Binding("text", "key"))
);
// 模型仅包含描述图表的基本信息
diagram.model = new go.GraphLinksModel( //两个JavaScript对象数组
[
// 添加“颜色”属性
{
key: "Alpha",
color: "lightblue"
},
{
key: "Beta",
color: "orange"
},
{
key: "Gamma",
color: "lightgreen"
},
{
key: "Delta",
color: "pink"
}
],
[ // 数组中的连接数据
{
from: "Alpha",
to: "Beta"
},
{
from: "Alpha",
to: "Gamma"
},
{
from: "Beta",
to: "Beta"
},
{
from: "Gamma",
to: "Delta"
},
{
from: "Delta",
to: "Alpha"
}
]);
diagram.initialContentAlignment = go.Spot.Center;
// 启用Ctrl-Z撤消和Ctrl-Y重做
diagram.undoManager.isEnabled = true;
</script>
</body> </html>
GoJS实例3的更多相关文章
- GoJS实例1
复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果 <!DOCTYPE html> <html> <head> <meta charset=& ...
- GoJS实例4
此示例更改链接数据的“to”属性,使链接连接到不同的节点.复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果 <!DOCTYPE html> <html> &l ...
- 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 ...
随机推荐
- C/C++网络编程5——实现基于TCP的服务器端/客户端2
三次握手过程详解: 1:客户端的协议栈向服务器端发送SYN包,并告诉服务器端当前放送序号为j,客户端进入SYNC_SEND状态. 2:服务器端的协议栈收到这个包以后,和客户端进行ACK应答,应答值为j ...
- python-定时任务-apschelduer
python-定时任务-apschelduer 1. apscheduler 1.1. install pip install apscheduler 1.2. basic co ...
- Django 中的select_related函数优化查询
参考链接: https://blog.csdn.net/secretx/article/details/43964607 在数据库有外键的时候,使用select_related()和prefech_r ...
- SpringBoot Controller找不到视图路径
在启动类加注解@ComponentScan("com.controller")即可,括号里表示Controller所在包名. 参考:https://blog.csdn.net/ji ...
- 基于Modelsim的视频流仿真
一.前言 最近在看牟新刚写的<基于FPGA的数字图像处理原理及应用>,书中关于FPGA数字图像处理的原理的原理写的非常透彻,在网上寻找了很久都没有找到完整的源代码工程,因此尝试自己做了补充 ...
- Django问题 Did you rename .....a ForeignKey
给新加入的字段添加一个default默认值即可,让字段非空.然后在进行makemigrations,完成操作后删除相关默认值即可.
- 莫烦 - Pytorch学习笔记 [ 二 ] CNN ( 1 )
CNN原理和结构 观点提出 关于照片的三种观点引出了CNN的作用. 局部性:某一特征只出现在一张image的局部位置中. 相同性: 同一特征重复出现.例如鸟的羽毛. 不变性:subsampling下图 ...
- 「HNOI2004」宠物收养场
「HNOI2004」宠物收养场 传送门 对宠物和人各维护一棵平衡树,每次 \(\text{split}\) 的时候记得判一下子树是否为空,然后模拟就好了. 参考代码: #include <alg ...
- 设计模式课程 设计模式精讲 10-2 外观模式coding
1 代码演练 1.1 代码演练1(不使用外观模式) 1.2 代码演练2(使用外观模式) 2 应用核心 2.1 核心 2.2 零碎知识点 1 代码演练 1.1 代码演练1(不使用外观模式) 需求: 木木 ...
- 百度云bae安装discuz论坛教程
作者:孤风一剑 发布:2013-05-11 13:37 栏目:站长在线 点击:6,846次 41条评论 各位草根们有福啦,弄了几天,终于可以在bae上搭建discuz论坛了,下面我就简 ...