此示例更改链接数据的“to”属性，使链接连接到不同的节点.复制如下内容保存到空白的.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://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", {

                    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() {

            var model = diagram.model;

            // 所有模型更改都应在事务中发生

            model.startTransaction("reconnect link");

            var data = model.linkDataArray[0]; // 获取第一个链接数据

            if (model.getToKeyForLinkData(data) === "Beta") {

                model.setToKeyForLinkData(data, "Gamma");

            } else {

                model.setToKeyForLinkData(data, "Beta");

            }

            model.commitTransaction("reconnect link");

        }

        function loop() {

            setTimeout(function () {

                switchTo();

                loop();

            }, 1000);

        }

        loop();

    </script>

</body>

</html>

此示例点击不同的节点转换颜色.复制如下内容保存到空白的.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://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", {

                    selectionAdorned: false

                }, // no blue selection handle!

                $(go.Shape, "RoundedRectangle", {

                        fill: "white"

                    },

                    // bind Shape.fill to Part.isSelected converted to a color

                    new go.Binding("fill", "isSelected", function (sel) {

                        return sel ? "dodgerblue" : "lightgreen";

                    }).ofObject()), // no name means bind to the whole Part

                $(go.TextBlock, {

                        margin: 5

                    },

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

            );

        diagram.model.nodeDataArray = [{

                descr: "Select me!"

            },

            {

                descr: "I turn blue when selected."

            }

        ];

    </script>

</body>

</html>

 移动节点.复制如下内容保存到空白的.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://unpkg.com/gojs/release/go-debug.js"></script>

</head>

<body>

    <div id="myDiagramDiv"></div>

    <p id="bindTwoWayData" onclick='shiftNode()'></p>

    <script>

        //为了简洁

        var $ = go.GraphObject.make;

        var diagram = new go.Diagram("myDiagramDiv");

        diagram.nodeTemplate =

            $(go.Node, "Auto", {

                    locationSpot: go.Spot.Center

                },

                new go.Binding("location", "loc").makeTwoWay(), // 双向绑定

                $(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(0, 0)

        }];

        diagram.model = new go.GraphLinksModel(nodeDataArray);

        shiftNode = (function () { //定义一个名为"shiftNode"的回调函数，当点击时触发

            // 所有的model中做出的改变都应该在事务中

            diagram.startTransaction("shift node");

            var data = diagram.model.nodeDataArray[0]; // get the first node data

            var node = diagram.findNodeForData(data); // find the corresponding Node

            var p = node.location.copy(); // make a copy of the location, a Point

            p.x += 20;

            if (p.x > 200) p.x = 0;

            // changing the Node.location also changes the data.loc property due to TwoWay binding

            node.location = p;

            // show the updated location held by the "loc" property of the node data

            document.getElementById("bindTwoWayData").textContent = data.loc.toString();

            diagram.commitTransaction("shift node");

        });

        shiftNode(); // initialize everything

    </script>

</body>

</html>

GoJS实例4的更多相关文章

  1. GoJS实例1

    复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果 <!DOCTYPE html> <html> <head> <meta charset=& ...

  2. GoJS实例3

    复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果 <!DOCTYPE html> <html> <head> <meta charset=& ...

  3. GoJS实例2

    复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果 <!DOCTYPE html> <html> <head> <meta name=&quo ...

  4. GoJS最简单的实例

    复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果 <!DOCTYPE html> <html> <head> <meta charset=& ...

  5. GoJS 友情链接

    目前GoJS官网是学习gojs的最佳选择 GOJS简单示例 GoJS API学习 GoJS组织结构图2 mind map思维导图 组织结构图 GoJS实例1 GoJS实例2 GoJS实例3 GoJS实 ...

  6. GoJS简单示例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 最近学习工作流 推荐一个activiti 的教程文档

    全文地址:http://www.mossle.com/docs/activiti/ Activiti 5.15 用户手册 Table of Contents 1. 简介 协议 下载 源码 必要的软件 ...

  8. JS组件系列——Gojs组件，前端图形化插件之利器

    前言:之前分享过两篇关于流程画图的前端组件,使用的jsPlumb.这个组件本身还不错,使用方便.入门简单.轻量级,但是使用一段时间下来,发现一些弊病,比如组件不太稳定,初始进入页面的时候连线的样式有时 ...

  9. JS图形化插件利器组件系列 —— Gojs组件

    阅读目录 一.组件效果预览 二.初次接触 1.Gojs简介 2.使用入门 三.综合效果 1.自定义流程的使用 2.工业流程图 四.总结 正文 前言:之前分享过两篇关于流程画图的前端组件,使用的jsPl ...

随机推荐

  1. Python 基础之面向对象之八步理解装饰器

    装饰器:在不改变原有代码的情况下,为该原函数扩展新功能特征:返回新函数,替换旧函数语法:@ 语法糖 1.装饰器原型 #例1: def kuozhan(func):    def newfunc():  ...

  2. 5种JVM调优配置方法概览

    1 堆设置 -Xms:初始堆大小 -Xmx:最大堆大小 -XX:NewSize=n:设置年轻代大小 -XX:NewRatio=n:设置年轻代和年老代的比值.如:为3,表示年轻代与年老代比值为1:3,年 ...

  3. UIControl的API

    @property(nonatomic, readonly) UIControlState state; 控件的状态,指定为位掩码值. @property(nonatomic, getter=isEn ...

  4. leetcode刷题-- 2. 排序（待更新）

    排序 参考五分钟学算法 复杂度比较 时间复杂度 O(n2) 各种简单的排序:直接插入.直接选择.冒泡 O(nlog2n) 快速排序.堆排序.归并排序 O(n1+\(\lambda\)),希尔排序 线性 ...

  5. JavaWeb开发记录全过程--(1)环境配置

    一. 开发工具:idea 理由:根据idea 如何连接服务器,可以直接在idea上连接服务器 安装:根据IntelliJ IDEA 下载安装(含注册码),进行非常规手段使用idea 二.分析问题: # ...

  6. Java源码-集合-LinkedList

    基于JDK1.8.0_191 介绍   LinkedList是以节点来保存数据的,不像数组在创建的时候需要申请一段连续的空间,LinkedList里的数据是可以存放在不同的空间当中,然后以内存地址作为 ...

  7. IP地址规划

    IP地址(Internet Protocol Address),缩写为IP Adress,是一种在Internet上的给主机统一编址的地址格式,也称为网络协议(IP协议)地址.它为互联网上的每一个网络 ...

  8. JS - false 的 六种类型

    document.write("--------------");document.write(!false);document.write("------------- ...

  9. GET和POST面试知识点

    导读:大部分APP都依赖于网络通信,对于开发者来说,基于网络通信的开发无疑是必须掌握的.HTTP通信作为目前计算机主要的通信协议,是企业面试当中必问的.对于HTTP通信的概念,本文不作说明,我将在后续 ...

  10. Day1-B-CF-1144B

    简述:有一个n个元素的序列,选奇数下一个就选偶数,偶数则下一个就是奇数,问能否取完,能取完输出0,否则输出能剩下的最小的之和 思路:统计奇偶数个数,若相等或相差一则取完,否则排列后取出最小的前x个(x ...