此示例更改链接数据的“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. centos初始化脚本

    centos初始化脚本 添加IP.主机名.挂载/dev/sdb1磁盘 #!/bin/bash # ip=$ hostname=$ if [ -z $ip ] || [ -z $hostname ]; ...

  2. python面试题手动总结答案锦集

    数据类型 字符串 1.列举python中的基本数据类型 数字:int 布尔值:bool 字符串:str 列表:list 元组:tuple 字典:dict 集合:set 然后我们需要了解一些运算符,应为 ...

  3. 夯实Java基础系列目录

    自进入大学以来,学习的编程语言从最初的C语言.C++,到后来的Java,. NET.而在学习编程语言的同时也逐渐决定了以后自己要学习的是哪一门语言(Java).到现在为止,学习Java语言也有很长一段 ...

  4. 科普：为什么 String hashCode 方法选择数字31作为乘子

    作者:coolblog 此文章转载自:https://segmentfault.com/a/1190000010799123 1. 背景 某天,我在写代码的时候,无意中点开了 String hashC ...

  5. java_3:JVM、JRE、JDK区别和联系

    首先 三者之间存在包含关系JVM + 核心类库 = JREJRE + java开发工具(javac.exe/jar.exe) = JDK 什么是JVM? 我们知道Java语言有一个独特的优点就是可以跨 ...

  6. c++读取注册表的实例

    // CRegisterTest.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #in ...

  7. Django 学习之中间件Middleware

    一.中间件介绍 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出.因为改变的是全局,所以需要谨慎实用,用不好会影响 ...

  8. 「CSP-S」2019年第一届Day1游记+题解

    「CSP-S」2019年第一届Day1游记+题解 Day 1 7:30 A.M. 8:10 A.M. 8:30 A.M. T1 格雷码 题目 考场经历+思考(正解) 8:50 A.M. T2 括号树 ...

  9. python之对象基础

    目录 面向对象 1. 面向过程编程的优缺点 2. 面向对象编程的优缺点 3. 类 类和函数的区别 什么是类 现实世界中先有对象,后有类 python中先有类,再有对象 对象 如何实例化一个对象 对象属 ...

  10. CF1209C Paint the Digits

    CF1209C Paint the Digits 题意:给定T组数据,每组数据第一行输入数字串长度,第二行输入数字串,用数字1和2对数字串进行涂色,被1涂色的数字子串和被2涂色的数字子串拼接成新的数字 ...