首页
首页
AI Coding
NEW
沸点
课程
直播
活动
AI刷题
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
GoJs
沅芷湘兰
创建于2023-04-10
订阅专栏
可视化构建工具GoJs的使用心得,包括在使用过程踩的一些坑进行分享。
等 15 人订阅
共31篇文章
创建于2023-04-10
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
GoJs的选择高亮
为了增加可视化图形的交互,本文介绍了节点的鼠标移入移出和点击事件的来修改操作的节点或者关联的节点和连线的样式修改。以达到做对应动作的时候,显示出一个高亮的效果。
GoJs实现Tab和Enter新增下级和同级节点
本文是通过工具类来兼容按键的点击之后根据keyCode来判断不同的按键点击之后去执行原本绑定的一个操作逻辑来实现脑图部分的快捷键操作。
GoJs实现切换上级节点
在可视化图形的树形图或者流程图等图形中,不是靠中间的连线来表明两个节点之间的关系,而是通过上下级关系来表明两者之间的父子关系。因此可以通过切换父级节点来修改上下级关系。
GoJs中的连线的箭头样式
可以通过修改箭头的样式来标记节点之间不同的关系,也可以通过设置箭头的样式来标记两个节点之间的路径,来实现对人物关系图的人物之间的关系分析。
GoJs关系图的全部路径和最短路径
在较为复杂的关系图当中,一般都是选择力导向布局进行布局.但是图数据量确实比较大的话,也会让中间的关系变的很复杂,因此寻找到全部的路径和最短的路径更加方便处理分析出不同的节点也就是角色之间的关系。
GoJs中layout和model的更新
前在可视化图形的操作的时候,有的时候在不修改容器的情况下。可能会需要更改图形的布局和数据来实现不同的数据的不同的布局显示,更加容易进行对比分析数据达到数据分析的效果。
GoJs中标题和缩略图
在可视化图形中为了方便区分,需要给图形一个标题。可以在画布外面用html调整位置之后作为图形的标题,当然也可以在画布内部进行一个标题的绘制。在画布上的节点数量很大的时候,也需要用到缩略图来帮助操作。
GoJs中导出图片或者SVG
在可视化图形的分析中,对基础图形进行增删改之后。除了保存修改之后的可视化数据之外。还需要保存为图片或者svg进行分享。
GoJs中使用HTML
在gojs中因为有自己的绘图模板和一些语法限制,实际上都是在canvas标签的特性上进行的封装。但是有些时候其拓展就不能满足需求的时候,可以对其和html结构进行一些交互,达到自己显示上的特殊。
GoJs中的动画使用
本文主要介绍了gojs内部已经封装的一些动画的配置和使用方法,有了动画的引入,不仅仅可以让操作过程变得很丝滑,很好的提高的用户的体验。并且让比如删除节点这种没有感觉的操作增加删除的观感。
GoJs中go.Panel的itemArray属性
对于类似vue中v-for的渲染列表,在gojs内部也同样存在,通过itemArray属性来配置一个数组进行渲染。
GoJs节点的折叠展开
在可视化图形中。因为数据量大的时候往往会对节点内显示的内容进行隐藏。除了前面文章中提到的`toolTip(提示信息)`之外,还可以通过本文中的折叠展开按钮对内容进行折叠,保证图形的阅读。
GoJs节点的选中高亮
在可视化图形的使用中.如果节点数据过多,我们就需要着重对研究的节点一个突出的样式来和其他节点进行一个区分。因此这个时候我们点击选中修改选中的样式就显得比较重要,可以根据需求进行拓展。
GoJs连线上的信息展示
可视化图形中很多的图形都需要线上的文字描述。流程图的操作,关系图的关系等等。并且根据需求的不同,其显示的位置和效果都不一样,通过本文的配置属性可以自定义很多样式的节点上的描述信息。
GoJs中的右键菜单--contextMenu
通过菜单的显示可以极大的拓展节点的交互功能,并且在可视化图像的显示中又不会影响到图中节点和连线等等信息的阅读。
GoJs中的提示框--toolTip
由于可视化图形的特殊性,为了展示出更多的信息.但是又不能缩减每一个节点携带的信息,只能对节点信息进行一个隐藏。在使用的时候通过交互行为来显示完整的信息。提示tooltip应运而生。
GoJs中的增删改查
通过交互事件可以在一些用户行为下触发回调函数,而在这些回调函数中处理的一些事务。而这些事务就包括获取到查询的节点,然后进行增删改操作,来丰富画布的展示和后续拓展。
GoJs图表的监听事件
根据图表的监听方法可更加丰富了交互行为,使交互不只是用户操作的节点,还能在操作过程中提供回调函数构成的钩子函数来触发不同场景的的操作响应。使交互的功能更强大,也使一些操作行为更加细致,增加用户体验。
GoJs的节点和内部元素的事件交互
可视化图形经过绘制之后,可以用一些交互事件极大的拓展图形的功能。可以很好的提高用户的使用体验。拓展一些额外功能的时候也比较方便。
GoJs图表的布局类型
利用布局可以将画布内的go.Diagram(图表)、go.Node(节点)、go.Link(连线)等等必备的一些元素。按照一定的排列模式进行显示。
下一页