此示例更改链接数据的“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. vb.net与vb的区别

    本文链接:https://blog.csdn.net/dfshsdr/article/details/63255645最近接触了vb.net,它增加了vb的很多特性,而且演化成为完全面向对象的编程语言 ...

  2. Windows程序设计学习笔记(1):一个简单的windows程序

    <Windows程序设计>(第五版)(美Charles Petzold著) #include<windows.h> LRESULT CALLBACK WndProc(HWND, ...

  3. Linux centos VMware Nginx防盗链、Nginx访问控制、Nginx解析php相关配置、Nginx代理

    一.Nginx防盗链 配置如下,可以和上面的配置结合起来 location ~* ^.+\.(gif|jpg|png|swf|flv|rar|zip|doc|pdf|gz|bz2|jpeg|bmp|x ...

  4. mysql 命令行个性化设置

    通过配置显示主机和用户名 mysql -u root -p --prompt="(\u@\h) [\d]>" 或在配置文件中修改,可在命令行中的目标位置查看 --tee na ...

  5. Django 学习 之路由层(URL)

    路由层(URL) 1.路由层简单配置 (1)path方法 写固定的url. (2)re_path方法 可以正则规则 例: urlpatterns = [ path('admin/', admin.si ...

  6. 2019年的代码都写完了吗？不如做个Python进度条看看还剩多少

    我们都知道,进度条是用来直观展示流程所需时间的优秀工具,以免我们担心流程会突然挂掉,而且我们可以用它来预测代码运行是否正常,借助进度条,每个人都能直观地看到脚本最新的进展情况. 如果你之前没用过进度条 ...

  7. 微信小程序 画布arc截取圆形图片

    画布提供了一种可以创建圆的方法 arc(x, y, r, s, e, counterclockwise) x,y:圆心 r:圆的半径 s:起始弧度 (0) e:终止弧度 (1.5 * Math.PI) ...

  8. TensorFlow Serving简介

    一.TensorFlow Serving简介 TensorFlow Serving是GOOGLE开源的一个服务系统,适用于部署机器学习模型,灵活.性能高.可用于生产环境. TensorFlow Ser ...

  9. Spark教程——（3）编写spark-shell测试Demo

    创建一个文件aa.txt,随便写点内容: hello world! aa aa d d dg g 登录HDFS文件系统: [root@node1 ~]# su hdfs 在HDFS文件系统中创建文件目 ...

  10. ORACLE 删除重复的数据

    内容转自:https://www.cnblogs.com/zfox2017/p/7676237.html         查询及删除重复记录的SQL语句   1.查找表中多余的重复记录,重复记录是根据 ...