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