五分钟搞定Go.js 

1、基于html5~因为Go.js是一个依赖于HTML5特性的JavaScript库，所以需要确保您的页面声明它是一个HTML5文档，当然需要加载库

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="description" content="An organization chart editor -- edit details and change relationships." />

    <title>数据图形化</title>

    <script src="js/go.js"></script>

</head>

2、每个Go.js图都包含在HHTML元素中，我们需要给出一个显示的大小

<div id="myDiagramDiv"

     style="width:400px; height:150px; background-color: #DAE4E4;"></div>

3、在JavaScript代码中，绘制图表时需要传递ID

var $ = go.GraphObject.make;

var myDiagram = $(go.Diagram, "myDiagramDiv");

注意：go是所有Gojs类型的“名称空间”。所有使用GoJs类的代码，如图表、节点、面板、形状或文本块，都以go做为前缀。

make来构建Gojs对象，使用$作为go.GraphObject的缩写。图中的加点和链接是由模型管理数据的可视化表示。GoJs有一个模型视图系统结构，其中模型包含描述节点和链接的数据（JavaScript对象数组）

基础图例代码

var $ = go.GraphObject.make;

var myDiagram = $(go.Diagram, "myDiagramDiv",

    {

      "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo

    });

var myModel = $(go.Model);

// in the model data, each node is represented by a JavaScript object:

myModel.nodeDataArray = [

  { key: "Alpha" },

  { key: "Beta" },

  { key: "Gamma" }

];

myDiagram.model = myModel;

简单介绍下以下几个小功能：

（）在上图中单击并拖动背景以平移视图

（）单击一个节点来选择它，或者按下并拖动一个节点来移动它

（）要创建一个选择框，单击并按住背景，然后开始拖动

（）使用CTRL-C和CTRL-V，或control-drag- drop，创建选择的副本

（）按Delete键删除选中的节点。(阅读更多键盘命令。)

（）由于启用了撤消管理器，CTRL-Z和CTRL-Y将撤消和重做移动、复制和删除操作。

4、一些属性的使用：

“shape”:用颜色显示预先定义或自定义的几何图形

“TextBlock”以各种字体显示（可编辑文本）

“Picture”用来显示图片

“Panel(面板)”,用来存放其他对象集合的容器，这些对象可以根据面板的类型以不同的方式惊醒定位和大小调整（如垂直堆栈和拉伸容器）

所有这些构建块都来自于GraphObject抽象类，因此我们随意地将它们称为GraphObject、对象或元素。注意，GraphObject不是HTML DOM元素，因此在创建或修改方面没有太多开销

我们希望模型数据属性影响我们的节点，这是通过数据绑定实现的。数据绑定允许我们通过自动设置这些GraphObjects的属性值来更改节点中的GraphObjects的外观和行为

使用介绍：

默认的节点模板很简单:一个包含一个文本块的节点。文本块的文本属性和模型数据的键属性之间有数据绑定。在代码中，模板看起来是这样的:

myDiagram.nodeTemplate =

  $(go.Node,

    $(go.TextBlock,

      // TextBlock.text is bound to Node.data.key

      new go.Binding("text", "key"))

  );

注意：文本块、形状和图片是GoJS的原始构建块。文本块不能包含图像;形状不能包含文本。如果想让节点显示一些文本，必须使用文本块。

5、

创建简单的图形面板

一种“水平”面板类型的节点，意味着其元素将被水平并排地放置。它有两个要素：

（1）一个图片为肖像，与图像源数据绑定

（2）带有文本数据绑定的名称文本块

6、

可以设置默认显示的内容

我们可能希望在不是所有信息都存在的情况下显示一些“默认”状态，例如当图像不加载或不知道名称时。本例中的“空”节点数据用于显示节点模板在没有值的情况下可以很好地工作

7、

使用自定义节点模板，

我们的关系图变得非常漂亮，但是我们可能想要展示更多。也许我们需要一张组织结构图来证明唐·喵真的是一个猫卡特尔的老板。所以我们将创建一个完整的组织结构图

为了让链接进入我们的图表，基本模型不会削减它。我们将不得不在GoJS中选择另外两个模型中的一个，这两个模型都支持链接。这些是GraphLinksModel和TreeModel。(请阅读更多关于模型的内容。)

8、

树模板的使用

树模有点不同。树模型中的链接不是维护单独的链接数据数组，而是通过为节点数据指定“父”来创建的。然后从这个关联创建链接。这里有一个和Tr相同的例子

9、

图的布局

图有一个默认布局，它接受所有没有位置的节点，并给它们位置，将它们安排在网格中。我们可以显式地为每个节点提供一个位置，以解决组织混乱的问题

我们想要显示一个层次结构，并且已经在使用TreeModel，所以最自然的布局选择是TreeLayout。TreeLayout默认从左到右流动，所以为了让它从上到下流动(这在组织图中很常见)

大家自己可以尝试啦!!!!!!!!!!!

五分钟搞定Go.js的更多相关文章

  1. zookeeper-架构设计与角色分工-《每日五分钟搞定大数据》

    本篇文章阅读时间5分钟左右 点击看<每日五分钟搞定大数据>完整思维导图   zookeeper作为一个分布式协调系统,很多组件都会依赖它,那么此时它的可用性就非常重要了,那么保证可用性的同 ...

  2. zookeeper核心-zab协议-《每日五分钟搞定大数据》

    上篇文章<paxos与一致性>说到zab是在paxos的基础上做了重要的改造,解决了一系列的问题,这一篇我们就来说下这个zab. zab协议的全称是ZooKeeper Atomic Bro ...

  3. HDFS-异常大全-《每日五分钟搞定大数据》

    点击看<每日五分钟搞定大数据>完整思维导图以及所有文章目录 问题1:Decomminssioning退役datanode(即删除节点) 1.配置exclude: <name>d ...

  4. 五分钟搞定 HTTPS 配置，二哥手把手教

    01.关于 FreeSSL.cn FreeSSL.cn 是一个免费提供 HTTPS 证书申请.HTTPS 证书管理和 HTTPS 证书到期提醒服务的网站,旨在推进 HTTPS 证书的普及与应用,简化证 ...

  5. 五分钟搞定Linux容器

    [TechTarget中国原创] Linux容器针对特定工作负载提供了全新的灵活性与可能性.存在很多解决方案,但是没有一个解决方案能够像systemd容器那样进行快速部署.给我五分钟,本文将介绍如何使 ...

  6. 五分钟搞定Docker安装ElasticSearch

    前言 项目准备上ElasticSearch,为了后期开发不卡壳只能笨鸟先飞,在整个安装过程中遇到以下三个问题. Docker安装非常慢 ElasticSearch-Head连接出现跨域 Elastic ...

  7. 五分钟搞定 Linux 文档全部知识，就看这篇文章

    作者:无痴迷,不成功 来源:见文末 写在前面 我们都知道Linux是一个支持多用户.多任务的系统,这也是它最优秀的特性,即可能同时有很多人都在系统上进行工作,所以千万不要强制关机,同时,为了保护每个人 ...

  8. zookeeper-操作与应用场景-《每日五分钟搞定大数据》

    Zookeeper作为一个分布式协调系统提供了一项基本服务:分布式锁服务,分布式锁是分布式协调技术实现的核心内容.像配置管理.任务分发.组服务.分布式消息队列.分布式通知/协调等,这些应用实际上都是基 ...

  9. zookeeper-如何修改源码-《每日五分钟搞定大数据》

    本篇文章仅仅是起一个抛砖迎玉的作用,举一个如何修改源码的例子.文章的灵感来自 ZOOKEEPER-2784. 提一个问题先 之前的文章讲过zxid的设计,我们先复习下: zxid有64位,分成两部分: ...

随机推荐

  1. C语言-第2次作业得分

    作业链接:https://edu.cnblogs.com/campus/hljkj/CS20180的2/homework/2292 作业链接:https://edu.cnblogs.com/campu ...

  2. 1040 mysql Too many connections

    笔者在项目中遇到mysql 出现:1040 too many connections 异常,意思是超过数据库最大连接数,打不开表结构信息.笔者排除问题建议:1.查看程序代码是否存在BUG:2.检查代码 ...

  3. 小程序cover-view踩过的坑

    1.前段时间开发一个小程序,里边用到cover-view,发现cover-view其实很多都是不支持的,比如动画,如果你想要在cover-view上边加动画你会发现没有效果,虽然在模拟器里边可以显示动 ...

  4. C++实验七

    #include <iostream> using namespace ::std; int main() { ios_base::fmtflags original_flags = co ...

  5. 查看celery 队列长度

    BROKER_URL = 'redis://127.0.0.1:6379/2' quque 名称:celery 查询队列长度命令: redis-cli -n 2 llen celery 注释: -n: ...

  6. Spark：DataFrame批量导入Hbase的两种方式(HFile、Hive)

    Spark处理后的结果数据resultDataFrame可以有多种存储介质,比较常见是存储为文件.关系型数据库,非关系行数据库. 各种方式有各自的特点,对于海量数据而言,如果想要达到实时查询的目的,使 ...

  7. 关于linux crontab定时操作oracle不执行的问题解决方案

    问题描述:启动定时任务对oracle表进行操作,但是手动执行脚本无问题,定时任务执行无结果不反馈消息 解决方案:以centos7为例吗,首先确定脚本可手动执行,然后检查/var/log/cron下的日 ...

  8. Android游戏引擎总汇 原文出处：http://software.intel.com/en-us/blogs/2012/03/13/game-engines-for-android?page=1

    随着Android系统的使用越来越广泛,了解一下Android平台下的游戏引擎就非常有必要.而同时因为基于Intel x86的移动设备越来越多,我也非常关注支持x86的移动游戏引擎.然而就目前为止游戏 ...

  9. 20165308『网络对抗技术』Exp5 MSF基础应用

    20165308『网络对抗技术』Exp5 MSF基础应用 一.原理与实践说明 实践内容 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 一个主动攻击实 ...

  10. Ubuntu 执行脚本报错：c.sh: Syntax error: "(" unexpected

    在Ubuntu下执行脚本报错 c.sh: Syntax error: "(" unexpected 解决办法 sudo dpkg-reconfigure dash ubuntu@i ...