Cytoscape.js 学习

官网 有多种 layout，可根据业务场景选择合适的 layout。由于项目业务涉及产品及成分关系的研究，选用 CoSE Bilkent 和 fCoSE 2种 layout，比较美观、清晰。

                                                                               fCoSE Layout如图

节点的关系获取方式 与 jQuery 操作DOM元素高度相似，支持链式调用。

几个概念：cy(cy 示例对象)，elements(包括节点node、线edge)

常用的方法：

1.cy.add(eles); 点击播放按钮可以查看示例运行效果

2.cy.remove(eles); 移除节点 

3.cy.on( events [, selector], function(event) ); 事件绑定

常用事件

• mousedown : when the mouse button is pressed

• mouseup : when the mouse button is released

• click : after mousedown then mouseup

• mouseover : when the cursor is put on top of the target

• mouseout : when the cursor is moved off of the target

• mousemove : when the cursor is moved somewhere on top of the target

• touchstart : when one or more fingers starts to touch the screen

• touchmove : when one or more fingers are moved on the screen

• touchend : when one or more fingers are removed from the screen

4.获取element的几种方法：cy.getElementById( id )  cy.$()  等

5.eles.select(); 设置element的选中状态

6.cy.data('id')   获取数据对象

7.eles.addClass('add')  添加类

8.eles.outgoers() element的outgoers 输出子代nodes和edges

9.eles.successors()  element的the outgoers, the outgoers' outgoers, ...，可理解为所有子孙后代nodes和edges

10.eles.incomers()  element的上一级nodes和edges

插件推荐：tooltip (tippy.js)、cytoscape-cose-bilkent、cytoscape-fcose