GoJs基本使用示例详解

目录
  • 使用gojs背景
  • gojs的引入
  • 去除水印

使用gojs背景

因为公司业务需要，需要完成一个树形的关系图，并且在后续过程中会对树形关系图进行很多的交互来拓展树形图的展示。因此在研究了D3，antV G6，cytoscape和go.js之后，决定使用gojs实现。因为gojs的交互功能封装比较完善，能够很快的搭建出想要的关系图之外，还有很多封装好的交互功能。例如可以使用键盘进行节点的复制和粘贴，通过textEdited属性实现节点内文字的双击编辑等等。

gojs的引入

我们可以直接引入js的方法对gojs进行引入

<script src="go.min.js"></script>

还可以使用cdn的方式进行使用

<script src="https://unpkg.com/gojs/release/go-debug.js"></script>

当然也可以通过npm进行安装

npm install gojs --save

本文档以引入gojs文件的方式，在vue中使用为例。因此我是在index中引入了gojs文件，因为方便去除水印，并且代码的同步。

然后我们就可以gojs进行使用啦，首先我们需要在使用的页面进行引入。

<script>
let $$ = go.GraphObject.make;//因为项目中使用到jquery,所以使用$$进行一个区分
export default {

然后在mounted中对this进行一个接收，以便我们在使用的时候出现this指向错误的问题。

mounted(){
    let _this = this
    this.$nextTick(()=>{
       this.init();//gojs实例化方法
    })
}

和很多可视化框架一样，我们首先要为我们的图形渲染提供一个容器，

<div
    id="myDiagramDiv"
    style="width:300px;
    height:300px;">
</div>

然后我们对gojs进行实例化,通过容器的id进行绑定，并且为图形的布局方式设置一个树形布局。

init(){
    this.myDiagram = $$(go.Diagram, "myDiagramDiv",{
	layout: $$(go.TreeLayout)//布局方式,TreeLayout为树形布局
    });
}

这样，我们一个简单的画布就已经初始化完成了。然后我们在画布中加入一些相数据

this.myDiagram.model = new go.Model(
  [
    { key: "1" },
    { key: "1-1" },
    { key: "1-2" }
  ],
  [
    {form:"1",to:"1-1"},
    {form:"1",to:"1-2"},
  ]);

然后一个简单的树形布局的图形就出来了

在执行new go.Model的时候，其传入的两个参数分别为节点数据和连线数据，在这里我们称之为nodes和links，其中nodes中包括key（必须，节点的唯一标识）和其他字段（主要是存储一些节点的配置项，比如节点的number数据或者其他需要在节点内显示的文字和图表等），而links包括from（必须，连线的出发节点的key）和to（必须，连线的结尾节点的key）字段和其他字段（比如连线上的关系文字说明），其中节点通过key来标识，因此我们要求数据的key必须唯一。不然的话，link数据在匹配出发节点和结束节点的会匹配到nodes数据中key值相同后面的节点，而nodes数据中key值相同的面的数据节点会生成一个游离的节点，因此不符合我们的需求。并且因为属性布局的特殊结构，我们还可以parent字段来处理一下数据。

this.myDiagram.model = new go.TreeModel(
    [ // the nodeDataArray
        { key: "1" },
        { key: "1-1", parent: "1" },
        { key: "1-2", parent: "1" }
    ]);

可以根据自己的实际需求进行选择性进行哪种方式渲染方式。

去除水印

当然你应该也发现了，图像渲染的画布上会出现gojs的版本信息和介绍等等水印，而去除这些水印是需要氪金的，然而我们还有一些其他方法能对水印进行去除，我们在下载的go.min.js中全局搜索7eba17a4ca3b1a8346找到a.ir或者a.jv等，因为版本的不一样属性的名字也会发生改变

a.ir=b.W[Ra("7eba17a4ca3b1a8346")][Ra("78a118b7")](b.W,ok,4,4);

然后把这段代码替换为

a.ir=function(){return true;};

只要保证属性名一致就可以，然后重启我们的项目就可以清除水印啦。

在下篇文章中我们会通过this.myDiagram.nodeTemplate中的通过TextBlock、shape、Picture、Groups、Panel和界面的布局来对我们的节点进行丰富而显示出各种各样并且显示内容不同的的节点类型。

以上就是GoJs基本使用示例详解的详细内容，更多关于GoJs基本使用的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue + gojs 实现拖拽流程图效果

    目录 一.流程图效果 二.为什么选go.js流程图插件去开发项目? 三.项目开发 四.当前画布的监听事件名称包括 五.迭代篇 (一).项目的迭代. (二).整体用的js方法 (三).功能分析 一.流程图效果 最近一段时间在研究go.js,它是一款前端开发画流程图的一个插件,也是一个难点,要说为什么是难点,首先,它是依赖画布canvas知识开发.其次,要依赖于内部API开发需求,开发项目需求的时候就要花费大量的时间去熟悉go.js的API,然后才能进行开发.话不多说,我就先把我最近做的项目案例效果

  • gojs一些实用的高级用法

    目录 1. 取消更新动画 2. 导出图(含可视区外的部分) 3. 禁用 ctrl 相关快捷键 4. 画布滚动模式,无限滚动 or 局部滚动 5. 展开收起多层嵌套的组 6. 给图元素加动画 7. 修改框选的样式 1. 取消更新动画 问题:更新数据的时候,会触发渲染,有渲染动画,用户体验不好. 方案:初始数据绘制,有动画:更新数据绘制,无动画. 代码实现: // 后面所用到的 diagram 都是 gojs 创建的实例 // diagram_container 为图容器dom id diagram

  • GoJs图形绘图模板Shape示例详解

    目录 前言 Shape的使用 width和height属性 fill属性 stroke.strokeWidth.strokeDashArray属性 geometry属性 angle.scale属性 strokeCap strokeJoin属性 拓展 结语 前言 在可视化图形的展示过程中,节点内部往往不只是有文字描述,这样看起来很往往比较枯燥.在这个时候我们就可以在图形的节点内部加入一些几何图形.然后实现图形和文字的结合使用的话,不仅可以让节点内的内容更加形象,而且还可以通过图形标记对不同类型的节

  • GoJs 图片绘图模板Picture使用示例详解

    目录 前言 go.Picture的使用 go.Picture的属性 width.height.desiredSize属性 source属性 flip属性 imageStretch.imageAlignment属性 拓展 结语 前言 前面已经说过了通过go.TextBlock(文本)和go.Shape(集合图形)来丰富节点内部的显示内容.而有些时候需要在节点内部上传一些说明材料,恰好这些材料又是图片材料.如果拿图片和节点信息对照观看的话,一一对照会特别麻烦.如果能够在节点内部显示缩略图的话.在信息

  • gojs实现蚂蚁线动画效果

    gojs实现蚂蚁线动画效果

    目录 一.gojs 实现 1. 绘图 2. 虚线实现 3. 让虚线动起来 二.虚线及虚线动画背后的原理 三.虚线的一些概念 四.css 绘制边框虚线 在绘制 dag 图时,通过节点和来箭头的连线来表示节点彼此之间的关系.而节点常常又带有状态,为了更好的表示节点之间的流程关系,loading 状态的节点,与后续节点之间,需要用 动画着的虚线 表示,表示正在处理中,处理完才会变成实线.原理同页面没加载出来之间,加个 loading 提示,能提供更好的交互体验. 那么如何用 gojs 实现这个效果呢?

  • GoJs基本使用示例详解

    目录 使用gojs背景 gojs的引入 去除水印 使用gojs背景 因为公司业务需要,需要完成一个树形的关系图,并且在后续过程中会对树形关系图进行很多的交互来拓展树形图的展示.因此在研究了D3,antV G6,cytoscape和go.js之后,决定使用gojs实现.因为gojs的交互功能封装比较完善,能够很快的搭建出想要的关系图之外,还有很多封装好的交互功能.例如可以使用键盘进行节点的复制和粘贴,通过textEdited属性实现节点内文字的双击编辑等等. gojs的引入 我们可以直接引入js的

  • GoJs分组绘图模板go.Group使用示例详解

    目录 前言 Group的使用 Group的属性 handlesDragDropForMembers.isSubGraphExpanded属性 isSubGraphExpanded属性 ungroupable.wasSubGraphExpanded属性 结语 前言 在可视化图形中,很多的节点和连线都有某一个特征或者属于某些分类,为了在使用可视化图形的时候更加直观的看出相同类型节点的集合,我们就会用到分组的绘图模板. Group的使用 //data nodes: [ { key: "1",

  • GoJs连线绘图模板Link使用示例详解

    目录 前言 go.link的简单使用 go.Link的属性配置 routing属性 curve属性 corner.toEndSegmentLength.fromEndSegmentLength.fromShortLength.toShortLength属性 selectable.fromSpot.toSpot属性 总结 前言 可视化图形中除了携带很多信息的节点(node)之外,还需要知道他们之间的关系,而链接他们之间的连线在gojs中是使用go.link进行绘制.在渲染的时候我们根据数据的fro

  • AngularJS的Filter的示例详解

    AngularJS的Filter的示例详解

    贴上几个有关Filter使用的几个示例. 1. 首先创建一个表格 <body ng-app="app"> <div class="divAll" ng-controller="tableFilter"> <input type="text" placeholder="输入你要搜索的内容" ng-model="key"> <br><br

  • bat批处理 if 命令示例详解

    if 命令示例详解 if,正如它E文中的意思,就是"如果"的意思,用来进行条件判断.翻译过来的意思就是:如果符合某一条件,便执行后面的命令. 主要用来判断,1.两个"字符串"是否相等:2.两个数值是大于.小于.等于,然后执行相应的命令. 当然还有特殊用法,如结合errorlevel:if errorlevel 1 echo error 或者结合defined(定义的意思):if defined test (echo It is defined) else echo 

  • Docker-Compose的使用示例详解

    Docker-Compose的使用示例详解

    Docker Compose是一个用来定义和运行复杂应用的Docker工具.使用Compose,你可以在一个文件中定义一个多容器应用,然后使用一条命令来启动你的应用,完成一切准备工作. - github.com/docker/compose docker-compose是用来在Docker中定义和运行复杂应用的工具,比如在一个yum文件里定义多个容器,只用一行命令就可以让一切就绪并运行. 使用docker compose我们可以在Run的层面解决很多实际问题,如:通过创建compose(基于YU

  • jQuery.Validate表单验证插件的使用示例详解

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求. 请在这里查看示例 validate示例 示例包含 验证错误时,显示红色错误提示 自定义验证规则 引入中文错误提示 重置表单需要执行2句话 源码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

  • JavaScript中自带的 reduce()方法使用示例详解

    1.方法说明 , Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算,其效果就是: [x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4) 2. 使用示例 'use strict'; function string2int(s){ if(!s){ alert('the params empty'); return; } if

随机推荐