此示例更改链接数据的“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. 1 CSS简介&语法&选择器及优先级&背景&文本&字体&链接&列表&表格

    什么是CSS? Cascading Style Sheets层叠样式表,样式定义如何显示HTML元素 样式通常存储于样式表中,外部样式表通常存储在CSS文件中 多个样式定义可层叠为1,样式对网页中元素 ...

  2. 01初步启动Hadoop服务

    1.rz命令将hadoop压缩包上传至Linux服务器中 2.tar -zxvf hadoop-2.7.7.tar.gz(解压即可用) 3.将解压出来的hadoop移到想要放的位置 mv hadoop ...

  3. Linux系统的发展历史和学习前景介绍

    2020年了,我想来跟大家聊聊Linux运维这一行业,从几个方面说下行业的现状.如何学好Linux和如何成为专业运维人员以及云服务对于Linux运维的影响. 一.linux行业状况 我们都知道从199 ...

  4. Educational Codeforces Round 72 (Rated for Div. 2)E（线段树，思维）

    #define HAVE_STRUCT_TIMESPEC#include<bits/stdc++.h>using namespace std;#define BUF_SIZE 100000 ...

  5. 学习不一样的vue实战(2): 项目分析

    学习不一样的vue实战(2): 项目分析 首先 首发博客: 我的博客 项目源码: 源码(喜欢请star) 项目预览: 预览 上一章: <学习不一样的vue(1)实战:环境搭建> 我的Q群: ...

  6. Python学习 —— 爬虫入门 - 爬取Pixiv每日排行中的图片

    更新于 2019-01-30 16:30:55 我另外写了一个面向 pixiv 的库:pixiver 支持通过作品 ID 获取相关信息.下载等,支持通过日期浏览各种排行榜(包括R-18),支持通过 p ...

  7. 安装本地jar到maven仓库

    mvn install:install-file -DgroupId=com.alibaba -DartifactId=dubbo -Dversion=2.8.4 -Dpackaging=jar -D ...

  8. Number()、parseInt()、parseFloat()、~~、~

    一.Number() 如果是Boolean值,true和false值将分别被转换为1和0. 如果是数字值,只是简单的传入和返回. 如果是null值,返回0. 如果是undefined,返回NaN. 如 ...

  9. jdbc学习over

    这次的代码和之前学习到一般的代码主要就是将一些很常见的操作(建立连接.清除连接)不管做什么操作都需要用到它们,所以将它们单独放到另一个工具类里面去. 用到的术语: 1.事务:https://www.c ...

  10. redis服务器性能优化

    1.系统内存OOM优化 vm.overcommit_memory Redis会占用非常大内存,所以通常需要关闭系统的OOM,方法为将“/proc/sys/vm/overcommit_memory”的值 ...