GoJs

为了增加可视化图形的交互，本文介绍了节点的鼠标移入移出和点击事件的来修改操作的节点或者关联的节点和连线的样式修改。以达到做对应动作的时候，显示出一个高亮的效果。

本文是通过工具类来兼容按键的点击之后根据keyCode来判断不同的按键点击之后去执行原本绑定的一个操作逻辑来实现脑图部分的快捷键操作。

在可视化图形的树形图或者流程图等图形中，不是靠中间的连线来表明两个节点之间的关系，而是通过上下级关系来表明两者之间的父子关系。因此可以通过切换父级节点来修改上下级关系。

可以通过修改箭头的样式来标记节点之间不同的关系，也可以通过设置箭头的样式来标记两个节点之间的路径，来实现对人物关系图的人物之间的关系分析。

在较为复杂的关系图当中，一般都是选择力导向布局进行布局.但是图数据量确实比较大的话，也会让中间的关系变的很复杂，因此寻找到全部的路径和最短的路径更加方便处理分析出不同的节点也就是角色之间的关系。

前在可视化图形的操作的时候，有的时候在不修改容器的情况下。可能会需要更改图形的布局和数据来实现不同的数据的不同的布局显示，更加容易进行对比分析数据达到数据分析的效果。

在可视化图形中为了方便区分，需要给图形一个标题。可以在画布外面用html调整位置之后作为图形的标题，当然也可以在画布内部进行一个标题的绘制。在画布上的节点数量很大的时候，也需要用到缩略图来帮助操作。

在可视化图形的分析中，对基础图形进行增删改之后。除了保存修改之后的可视化数据之外。还需要保存为图片或者svg进行分享。

在gojs中因为有自己的绘图模板和一些语法限制，实际上都是在canvas标签的特性上进行的封装。但是有些时候其拓展就不能满足需求的时候，可以对其和html结构进行一些交互，达到自己显示上的特殊。

本文主要介绍了gojs内部已经封装的一些动画的配置和使用方法，有了动画的引入，不仅仅可以让操作过程变得很丝滑，很好的提高的用户的体验。并且让比如删除节点这种没有感觉的操作增加删除的观感。

对于类似vue中v-for的渲染列表，在gojs内部也同样存在，通过itemArray属性来配置一个数组进行渲染。

在可视化图形中。因为数据量大的时候往往会对节点内显示的内容进行隐藏。除了前面文章中提到的`toolTip(提示信息)`之外，还可以通过本文中的折叠展开按钮对内容进行折叠，保证图形的阅读。

在可视化图形的使用中.如果节点数据过多，我们就需要着重对研究的节点一个突出的样式来和其他节点进行一个区分。因此这个时候我们点击选中修改选中的样式就显得比较重要，可以根据需求进行拓展。

可视化图形中很多的图形都需要线上的文字描述。流程图的操作，关系图的关系等等。并且根据需求的不同，其显示的位置和效果都不一样，通过本文的配置属性可以自定义很多样式的节点上的描述信息。

通过菜单的显示可以极大的拓展节点的交互功能，并且在可视化图像的显示中又不会影响到图中节点和连线等等信息的阅读。

由于可视化图形的特殊性，为了展示出更多的信息.但是又不能缩减每一个节点携带的信息，只能对节点信息进行一个隐藏。在使用的时候通过交互行为来显示完整的信息。提示tooltip应运而生。

通过交互事件可以在一些用户行为下触发回调函数，而在这些回调函数中处理的一些事务。而这些事务就包括获取到查询的节点，然后进行增删改操作，来丰富画布的展示和后续拓展。

根据图表的监听方法可更加丰富了交互行为，使交互不只是用户操作的节点，还能在操作过程中提供回调函数构成的钩子函数来触发不同场景的的操作响应。使交互的功能更强大，也使一些操作行为更加细致，增加用户体验。

可视化图形经过绘制之后，可以用一些交互事件极大的拓展图形的功能。可以很好的提高用户的使用体验。拓展一些额外功能的时候也比较方便。

利用布局可以将画布内的go.Diagram（图表）、go.Node(节点)、go.Link（连线）等等必备的一些元素。按照一定的排列模式进行显示。