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 ...
随机推荐
- idea隐藏配置文件
- PTA的Python练习题（二）
继续在PTA上练习Python (从 第2章-5 求奇数分之一序列前N项和 开始) 1. x=int(input()) a=i=1 s=0 while(i<=x): s=s+1/a a=a+2 ...
- ES5-严格模式
在es5中可以开启一种严格模式的代码形式,开启方式是:将全局或者函数的第一条语句定义为:'use strict';. 如果浏览器不支持,会将其解析为一条普通语句,没有任何的副作用. 开启全局模式后会有 ...
- springmvc启动加载指定方法
官网: https://docs.oracle.com/javaee/7/api/javax/annotation/PostConstruct.htmlblog:https://blog.csdn.n ...
- MCM（矩阵链乘法）
这是<算法导论>动态规划中的一个问题.问题简述如下:我们在求解矩阵相乘时通常会有一个最优括号方案来对矩阵进行顺序相乘,这样会减少大量的计算时间. 我们知道矩阵A.B相乘,只能是当矩阵A的列 ...
- DRF项目之序列化器和视图重写方法的区别
我们,都知道,DRF框架是一款高度封装的框架. 我们可以通过重写一些方法来实现自定义的功能. 今天,就来说说在视图中重写和序列化器中重写方法的区别. 在视图中重写方法: 接收请求,处理数据(业务逻辑) ...
- JAVA项目开发之文档篇
转自链接:https://blog.csdn.net/Zonzereal/article/details/76704455
- mysql 获取刚插入行id汇总
mysql 获取刚插入行id汇总 我们在写数据库程序的时候,经常会需要获取某个表中的最大序号数, 一般情况下获取刚插入的数据的id,使用select max(id) from table 是可以的.但 ...
- 你知道HTTP协议的ETag是干什么的吗？
前言 在HTTP1.1规范中,新增了一个HTTP头信息:ETag.对于普通开发者来说,可能平时真的不会接触到该HTTP头.平时接触不到或者说用得少,不代表这个请求头不重要.ETag使用得当,是可以减少 ...
- kafka在zookeeper默认使用/为根目录，将/更换为/kafka
需求:kafka在zookeeper默认使用/为根目录,将/更换为/kafka 步骤:1.进入kafka的根目录: [root@node01 kafka_2.11-1.0.0]# cd /export ...