Vue中使用Cytoscape.js

JavaScript013

Vue中使用Cytoscape.js,第1张

在Vue中使用一些第三方库时，很容易犯的错误是直接把第三方库的对象放在Vue的data属性中。

例如在使用 Cytoscape.js 时，用下面这种声明方式。

这样做的确是方便后面的操作，但问题是，这种对象特别大，嵌套层级很深，如下图所示，如果直接放在data里，vue的响应式机制，会监听cy的每个属性，开销巨大，CPU占用瞬间到100%。

所以在使用 Cytoscape.js 、 Echarts.js 与vue结合时，要避免直接放在data属性中。一种方法是，在 mounted() 里引入该对象。

另一种方法是用 Object.freeze()

这两个方法，都能避免vue的响应式开销，后面也能够正常操作 this.cy 对象。

Cytoscape.js 为了性能，在个性化样式定制上，没有给出开箱即用的法子。

例如，想实现下面这样的效果图，G6有动画支持，而 Cytoscape.js 却没有。

如果确定要用Cytoscape.js ，该怎么实现这个效果呢？

当然，最直接的办法是用canvas动画来处理，但我暂时没精力研究canvas。

我想到了之前用过一个Canvas绘图库，里面提供了飞线图，正是我想要的效果。

能不能把二者结合呢？当然可以， 用Cytoscape.js 绘制静态节点，用DataV绘制动画 不就可以了嘛。

顺着这个思路，以很小的学习成本就实现了开头的那个demo。

灵活的组合使用工具，也是一门技术。

单击节点时，隐藏（折叠）链接的节点，并将removeElements保留在数组中。

然后与node一起存储特定的名称空间。

Cytoscape.js可以轻松的继承到网站或者Web应用中，实现交互的可视化图形。