cytoscape.js(cytoscapejs如何拖拽后保留坐标)

cytoscape.js点击事件 点击某个节点获取对应的值

Cytoscape.js 是一个开源的 JavaScript 图形库，您可以使用 Cytoscape.js 进行数据分析和可视化。

它兼容CommonJS/Node.js, jQuery 1.4+, 和纯 JavaScript。

Cytoscape.js 美化

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

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

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

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

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

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

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

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

Vue中使用Cytoscape.js

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

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

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

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

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

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

cytoscape.js如何让节点数据在但不显示

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

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

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

cytoscape.js 和d3.js哪个好用

这两个都没用过，我一般都是用finebi来分析我的数据，最后在Dashboard里面查看可视化的图表结果，而且可以很方便地切换维度，联动钻取等

cytoscope.js能支持多大的数据最多

cytoscope.js能支持 2 g 字节的数据最多Cytoscape是一个强大的JavaScript库，被广泛用于图形数据分析和可视化。

它是一个用纯JavaScript编写的轻量级库，它允许我们以丰富的图形格式显示和操作数据。在许可开源许可证（MIT）下，

库包含许多与图论理论算法相关的有用函数 - 从BFS到PageRank。