此示例更改链接数据的“to”属性，使链接连接到不同的节点.复制如下内容保存到空白的.html文件中，用浏览器打开即可查看效果

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>GoJS实例</title>
  7.     <style>
  8.         #myDiagramDiv {
  9.             width: 400px;
  10.             height: 500px;
  11.             background-color: #DAE4E4;
  12.         }
  13.     </style>
  14.     <script src="https://unpkg.com/gojs/release/go-debug.js"></script>
  15. </head>
  16.  
  17. <body>
  18.     <div id="myDiagramDiv"></div>
  19.  
  20.     <script>
  21.         //为了简洁
  22.         var $ = go.GraphObject.make;
  23.         var diagram = new go.Diagram("myDiagramDiv");
  24.         diagram.nodeTemplate =
  25.             $(go.Node, "Auto", {
  26.                     locationSpot: go.Spot.Center
  27.                 },
  28.                 $(go.Shape, "RoundedRectangle", {
  29.                     fill: "yellow",
  30.                     stroke: "orange",
  31.                     strokeWidth: 2
  32.                 }),
  33.                 $(go.TextBlock, {
  34.                         margin: 5
  35.                     },
  36.                     new go.Binding("text", "key"))
  37.             );
  38.  
  39.         var nodeDataArray = [{
  40.                 key: "Alpha"
  41.             },
  42.             {
  43.                 key: "Beta"
  44.             },
  45.             {
  46.                 key: "Gamma"
  47.             }
  48.         ];
  49.         var linkDataArray = [{
  50.             from: "Alpha",
  51.             to: "Beta"
  52.         }];
  53.         diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
  54.  
  55.         function switchTo() {
  56.             var model = diagram.model;
  57.             // 所有模型更改都应在事务中发生
  58.             model.startTransaction("reconnect link");
  59.             var data = model.linkDataArray[0]; // 获取第一个链接数据
  60.             if (model.getToKeyForLinkData(data) === "Beta") {
  61.                 model.setToKeyForLinkData(data, "Gamma");
  62.             } else {
  63.                 model.setToKeyForLinkData(data, "Beta");
  64.             }
  65.             model.commitTransaction("reconnect link");
  66.         }
  67.  
  68.         function loop() {
  69.             setTimeout(function () {
  70.                 switchTo();
  71.                 loop();
  72.             }, 1000);
  73.         }
  74.         loop();
  75.     </script>
  76. </body>
  77.  
  78. </html>

此示例点击不同的节点转换颜色.复制如下内容保存到空白的.html文件中，用浏览器打开即可查看效果

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>GoJS实例</title>
  7.     <style>
  8.         #myDiagramDiv {
  9.             width: 400px;
  10.             height: 500px;
  11.             background-color: #DAE4E4;
  12.         }
  13.     </style>
  14.     <script src="https://unpkg.com/gojs/release/go-debug.js"></script>
  15. </head>
  16.  
  17. <body>
  18.     <div id="myDiagramDiv"></div>
  19.  
  20.     <script>
  21.         //为了简洁
  22.         var $ = go.GraphObject.make;
  23.         var diagram = new go.Diagram("myDiagramDiv");
  24.         diagram.nodeTemplate =
  25.             $(go.Node, "Auto", {
  26.                     selectionAdorned: false
  27.                 }, // no blue selection handle!
  28.                 $(go.Shape, "RoundedRectangle", {
  29.                         fill: "white"
  30.                     },
  31.                     // bind Shape.fill to Part.isSelected converted to a color
  32.                     new go.Binding("fill", "isSelected", function (sel) {
  33.                         return sel ? "dodgerblue" : "lightgreen";
  34.                     }).ofObject()), // no name means bind to the whole Part
  35.                 $(go.TextBlock, {
  36.                         margin: 5
  37.                     },
  38.                     new go.Binding("text", "descr"))
  39.             );
  40.  
  41.         diagram.model.nodeDataArray = [{
  42.                 descr: "Select me!"
  43.             },
  44.             {
  45.                 descr: "I turn blue when selected."
  46.             }
  47.         ];
  48.     </script>
  49. </body>
  50.  
  51. </html>

 移动节点.复制如下内容保存到空白的.html文件中，用浏览器打开即可查看效果

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>GoJS实例</title>
  7.     <style>
  8.         #myDiagramDiv {
  9.             width: 400px;
  10.             height: 500px;
  11.             background-color: #DAE4E4;
  12.         }
  13.     </style>
  14.     <script src="https://unpkg.com/gojs/release/go-debug.js"></script>
  15. </head>
  16.  
  17. <body>
  18.     <div id="myDiagramDiv"></div>
  19.     <p id="bindTwoWayData" onclick='shiftNode()'></p>
  20.     <script>
  21.         //为了简洁
  22.         var $ = go.GraphObject.make;
  23.         var diagram = new go.Diagram("myDiagramDiv");
  24.         diagram.nodeTemplate =
  25.             $(go.Node, "Auto", {
  26.                     locationSpot: go.Spot.Center
  27.                 },
  28.                 new go.Binding("location", "loc").makeTwoWay(), // 双向绑定
  29.                 $(go.Shape, "RoundedRectangle", {
  30.                     fill: "lightblue",
  31.                     stroke: "blue",
  32.                     strokeWidth: 2
  33.                 }),
  34.                 $(go.TextBlock, {
  35.                         margin: 5
  36.                     },
  37.                     new go.Binding("text", "key"))
  38.             );
  39.  
  40.         var nodeDataArray = [{
  41.             key: "Alpha",
  42.             loc: new go.Point(0, 0)
  43.         }];
  44.         diagram.model = new go.GraphLinksModel(nodeDataArray);
  45.  
  46.         shiftNode = (function () { //定义一个名为"shiftNode"的回调函数，当点击时触发
  47.             // 所有的model中做出的改变都应该在事务中
  48.             diagram.startTransaction("shift node");
  49.             var data = diagram.model.nodeDataArray[0]; // get the first node data
  50.             var node = diagram.findNodeForData(data); // find the corresponding Node
  51.             var p = node.location.copy(); // make a copy of the location, a Point
  52.             p.x += 20;
  53.             if (p.x > 200) p.x = 0;
  54.             // changing the Node.location also changes the data.loc property due to TwoWay binding
  55.             node.location = p;
  56.             // show the updated location held by the "loc" property of the node data
  57.             document.getElementById("bindTwoWayData").textContent = data.loc.toString();
  58.             diagram.commitTransaction("shift node");
  59.         });
  60.         shiftNode(); // initialize everything
  61.     </script>
  62. </body>
  63.  
  64. </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,怎能不懂点PEP 呢？

    或许你是一个初入门 Python 的小白,完全不知道 PEP 是什么.又或许你是个学会了 Python 的熟手,见过几个 PEP,却不知道这玩意背后是什么.那正好,本文将系统性地介绍一下 PEP,与大 ...

  2. Vacuum Pump Manufacturer - Vacuum Pump Range Use: Considerations

    The vacuum pump is a versatile bottle that holds your lotion, shampoo and conditioner. Keep away fro ...

  3. 计蒜客 青出于蓝胜于蓝(dfs序+树状数组)

    题目描述 武当派一共有 n 人,门派内 n 人按照武功高低进行排名,武功最高的人排名第 1,次高的人排名第 2,... 武功最低的人排名 第 n.现在我们用武功的排名来给每个人标号,除了祖师爷,每个人 ...

  4. 一堂优秀学员吕智钊分享----HHR计划----直播课第二课

    备注:本周四:创业者分享,下周四:投资人分享. 08年开始创业. 最重要的两条复盘思考: 大纲: ---坚持最低成本试错,最快速度学习---- 1,复盘1:创业早期如何快速学习 a,从竞争对手身上学习 ...

  5. JS原型链的理解和使用（二）

    根据在创建对象的时候,创建出来的对象的__proto__指向创建这个对象的函数的prototype属性. 由于在调用对象的属性或者方法的时候会首先在对象的作用域中查找指定的属性或者方法,如果未找到则会 ...

  6. HDU1176免费馅饼（DP)

    都说天上不会掉馅饼,但有一天gameboy正走在回家的小径上,忽然天上掉下大把大把的馅饼.说来gameboy的人品实在是太好了,这馅饼别处都不掉,就掉落在他身旁的10米范围内.馅饼如果掉在了地上当然就 ...

  7. Spring boot 中发送邮件

    参考:https://blog.csdn.net/qq_39241443/article/details/81293939 添加依赖: <dependency> <groupId&g ...

  8. 【转】路由转发过程的IP及MAC地址变化

    A-----(B1-B2)-----(C1-C2)-------E 就假设拓扑图是这个样子吧,B1和B2是路由器B上的两个接口,C1和C2是路由器C上的两个接口,A和E是PC,由主机A向主机E发送数据 ...

  9. bash脚本编程

    一.bash中的变量 变量类型: 本地变量:只对当前shell进程有效,对其子shell以及其它shell都无效;   定义变量:[set]Var_name="value" 变量赋 ...

  10. Linux centosVMware Linux集群架构LVS DR模式搭建、keepalived + LVS

    一.LVS DR模式搭建 三台机器 分发器,也叫调度器(简写为dir) davery :1.101 rs1 davery01:1.106 rs2 davery02:11.107 vip 133.200 ...