此示例更改链接数据的“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. ThinkPHP5 动态生成图片缩略图

    需求场景 不同终端(PC端.手机端.平板),不同界面(列表页.详情页),对图片大小的要求不一样, 如果所有场景下都使用同一尺寸的图片,势必对会网络带宽及服务器性能造成一定的影响,由此需要服务器端能够根 ...

  2. kafka2x-Elasticsearch 数据同步工具demo

    Bboss is a good elasticsearch Java rest client. It operates and accesses elasticsearch in a way simi ...

  3. 6 JavaScript函数&内置构造&函数提升&函数对象&箭头函数&函数参数&参数的值传递与对象传递

    JavaScript函数:使用关键字function定义,也可以使用内置的JavaScript函数构造器定义 匿名函数: 函数表达式可以存储在变量中,并且该变量也可以作为函数使用. 实际上是匿名函数. ...

  4. 十二 INPUT逻辑视图的配置，回显错误信息

    Action接口中提供了五个逻辑视图的名称 SUCCESS ERROR LOGIN INPUT:input在某些拦截器会使用 NONE 配置逻辑视图:struts_demo2.xml,配置后出现错误信 ...

  5. 动态代理Cglib

    jar包 <!-- https://mvnrepository.com/artifact/cglib/cglib --><dependency> <groupId> ...

  6. 第1节 Scala基础语法：5、6、7、8、基础-申明变量和常用类型，表达式，循环，定义方法和函数

    4.    Scala基础 4.1.   声明变量 package cn.itcast.scala object VariableDemo {   def main(args: Array[Strin ...

  7. Python的常用库

    读者您好.今天我将介绍20个属于我常用工具的Python库,我相信你看完之后也会觉得离不开它们.他们是: Requests.Kenneth Reitz写的最富盛名的http库.每个Python程序员都 ...

  8. Ubuntu18.04下Qt5.9.8连接mysql数据库失败的解决办法

    问题: 连接mysql数据库时,出现如下 提示: QSqlDatabase: QMYSQL driver not loaded QSqlDatabase: available drivers: QSQ ...

  9. Centos7 nginx 反向代理的配置

    一.正向代理与反向代理 1.正向代理 正向代理往VPN理解 正向代理,也就是传说中的代理,他的工作原理就像一个跳板(VPN),简单的说: 我是一个用户,我访问不了某网站,但是我能访问一个代理服务器,这 ...

  10. .Net后台实现微信小程序支付

    最近一直再研究微信支付和支付宝支付,官方支付文档中一直在讲与第三方支付打交道的原理,却没有介绍我们自己项目中的APP与后台该怎么交互(哈哈,人家也没必要介绍这一块).拜读了官方文档和前辈们的佳作,自己 ...