cytoscape.js view utilities
v6.0.0
이 cytoscape.js 확장자는 MIT 라이센스에 따라 배포 된 Hide/Show, Highlight, Marquee Zoom 및 Free Form Selection과 같은 기타 뷰 유틸리티를 제공합니다.
이 확장을 사용할 때 다음 논문을 인용하십시오.
U. Dogrusoz, A. Karacelik, I. Safarli, H. Balci, L. Dervishi 및 MC Siper, "대형 네트워크의 복잡성을 관리하기위한 효율적인 방법 및 쉽게 사용자 정의 가능한 라이브러리", PLOS ONE, 13 (5) : E0197238, 2018.
데모를 위해 여기 (실행 취소 없음) 또는 여기 (undoable)를 클릭하십시오.
var instance = cy.viewUtilities(options)
@Param 옵션 - 제공되지 않으면 기본 옵션이 사용됩니다. 기본 옵션은 아래 섹션을 참조하십시오. highlightStyles 객체의 배열입니다. 개체는 형식 {node: ..., edge: ...} 따라야합니다. 객체를 선택할 때 강조 표시된 스타일을 무시하려면 selectStyles 사용됩니다. lassoStyle Lasso 라인 스타일을 무시하는 데 사용됩니다.
예를 들어
var options = {
highlightStyles : [
{ node : { 'border-color' : '#0b9bcd' , 'border-width' : 3 } , edge : { 'line-color' : '#0b9bcd' , 'source-arrow-color' : '#0b9bcd' , 'target-arrow-color' : '#0b9bcd' , 'width' : 3 } } ,
{ node : { 'border-color' : '#04f06a' , 'border-width' : 3 } , edge : { 'line-color' : '#04f06a' , 'source-arrow-color' : '#04f06a' , 'target-arrow-color' : '#04f06a' , 'width' : 3 } } ,
] ,
selectStyles : {
node : { 'border-color' : 'black' , 'border-width' : 3 , 'background-color' : 'lightgrey' } ,
edge : { 'line-color' : 'black' , 'source-arrow-color' : 'black' , 'target-arrow-color' : 'black' , 'width' : 3 }
} ,
setVisibilityOnHide : false , // whether to set visibility on hide/show
setDisplayOnHide : true , // whether to set display on hide/show
zoomAnimationDuration : 1500 , // default duration for zoom animation speed
neighbor : function ( ele ) {
return ele . closedNeighborhood ( ) ;
} ,
neighborSelectTime : 500 ,
lassoStyle : { lineColor : "#d67614" , lineWidth : 3 } // default lasso line color, dark orange, and default line width
htmlElem4marqueeZoom : '' , // should be string like `#cy` or `.cy`. `#cy` means get element with the ID 'cy'. `.cy` means the element with class 'cy'
marqueeZoomCursor : 'se-resize' , // the cursor that should be used when marquee zoom is enabled. It can also be an image if a URL to an image is given
isShowEdgesBetweenVisibleNodes : true // When showing elements, show edges if both source and target nodes become visible
} ;
var api = cy . viewUtilities ( options ) ; instance.highlight(eles, idx = 0)
@param eles - Cytoscape.js 컬렉션 (요소 컬렉션)을 강조 표시합니다.
@param idx - cytoscape.js 스타일의 색인. 지정하지 않으면 첫 번째 스타일이 사용됩니다.
지정된 요소에 스타일 클래스를 적용하십시오. 스타일 클래스는 인덱스로 지정됩니다
instance.highlightNeighbors(eles, idx = 0)
@param eles - Cytoscape.js 컬렉션 (요소 컬렉션)을 강조 표시합니다.
@param idx - cytoscape.js 스타일의 색인. 지정하지 않으면 첫 번째 스타일이 사용됩니다.
요소의 이웃을 강조 표시합니다 (색상 옵션에 따라). 하이라이트 기능과 유사하게 요소와 하이라이트 옵션을 모두 인수로 전송할 수 있습니다. 요소 만 전송되면 기본 하이라이트 색상이 사용됩니다.
instance.removeHighlights(eles)
@param eles - 하이라이트를 제거하는 요소
ELES에서 하이라이트를 제거하십시오.
instance.hide(eles)
@param eles - 숨겨야 할 요소
주어진 엘스를 가리십시오.
instance.show(eles)
@param eles - 보여줄 요소
엘레스에게 주어진다.
instance.showHiddenNeighbors(eles)
@param eles - 숨겨진 이웃을 보여주는 요소
주어진 엘레의 숨겨진 흑인을 불필요하게합니다. 복합 노드는 예상대로 존중되지 않습니다.
instance.zoomToSelected(eles)
@param eles - 확대 요소
선택된 ELE에 확대.
instance.enableMarqueeZoom(callback)
@param 콜백 - 함수의 끝에서 호출됩니다.
마키 줌을 활성화합니다. Ctrl+Shift 키가 다운되면 자동으로 호출됩니다.
instance.disableMarqueeZoom()
천막 줌을 비활성화합니다. Ctrl+Shift 키가 올라갈 때 자동으로 호출됩니다.
instance.enableLassoMode(callback)
@param 콜백 - 함수의 끝에서 호출됩니다.
Lasso 도구를 활성화합니다.
instance.disableLassoMode()
LASSO 도구를 비활성화합니다.
instance.getHighlightStyles()
아래와 같은 객체 배열 인 현재 highlightStyles 반환합니다.
[
{ node: { 'border-color': '#0b9bcd', 'border-width': 3 }, edge: {'line-color': '#0b9bcd', 'source-arrow-color': '#0b9bcd', 'target-arrow-color': '#0b9bcd', 'width' : 3} },
{ node: { 'border-color': '#bf0603', 'border-width': 3 }, edge: {'line-color': '#bf0603', 'source-arrow-color': '#bf0603', 'target-arrow-color': '#bf0603', 'width' : 3} },
],
instance.getAllHighlightClasses()
현재 사용되는 모든 Cytoscape.js 스타일 클래스를 반환합니다
instance.changeHighlightStyle(idx, nodeStyle, edgeStyle)
@param idx - 변경 될 스타일의 색인
@param nodestyle - 노드의 사이토 스케이프 스타일
@Param Edgestyle - 가장자리를위한 사이토 스케이프 스타일
idx 로 지정된 스타일을 변경합니다.
instance.addHighlightStyle(nodeStyle, edgeStyle)
@param nodestyle - 노드의 사이토 스케이프 스타일
@Param Edgestyle - 가장자리를위한 사이토 스케이프 스타일
highlightStyles 배열에 새로운 스타일을 추가합니다.
instance.removeHighlightStyle(styleIdx): void
@param styleidx - 삭제할 스타일의 색인 (0 기반)
highlightStyles 배열에서 스타일을 제거합니다.
instance.changeLassoStyle(styleObj)
@Param StyleObj - Linecolor 및/또는 Linewidth 속성이있는 Lasso 라인 스타일 객체
var options = {
highlightStyles : [ ] ,
selectStyles : { } ,
setVisibilityOnHide : false , // whether to set visibility on hide/show
setDisplayOnHide : true , // whether to set display on hide/show
zoomAnimationDuration : 1500 , // default duration for zoom animation speed
neighbor : function ( ele ) { // return desired neighbors of tapheld element
return false ;
} ,
neighborSelectTime : 500 , // ms, time to taphold to select desired neighbors in addition to the taphold event detect time by cytoscape
lassoStyle : { lineColor : "#d67614" , lineWidth : 3 } // default lasso line color, dark orange, and default line width
} ; ur.do("highlight", args)
ur.do("highlightNeighbors", args) ur.do("highlightNeighbours", args)
ur.do("removeHighlights")
ur.do("hide", eles)
ur.do("show", eles)
도서관 다운로드 :
npm install cytoscape-view-utilities ,bower install cytoscape-view-utilities , Or require() 프로젝트에 적합한 라이브러리 :
commonjs :
var cytoscape = require ( 'cytoscape' ) ;
var viewUtilities = require ( 'cytoscape-view-utilities' ) ;
viewUtilities ( cytoscape ) ; // register extensionAMD :
require ( [ 'cytoscape' , 'cytoscape-view-utilities' ] , function ( cytoscape , view - utilities ) {
view - utilities ( cytoscape ) ; // register extension
} ) ; 일반 HTML/JS에는 require() 필요하지 않기 때문에 자동으로 확장자가 등록되어 있습니다.
npm run build : Build ./src/** 는 생산 환경에서 cytoscape-view-utilities.js 에 into rection.npm run build:dev : Build ./src/** 는 파일을 최소화하지 않고 개발 환경에서 cytoscape-view-utilities.js 로 into니다. 이 프로젝트는 자동으로 NPM 및 Bower에 게시되도록 설정되었습니다. 게시하려면 :
npm run buildgit commit -am "Build for release"npm version major|minor|patchgit push && git push --tagsnpm publish .bower register cytoscape-view-utilities https://github.com/iVis-at-Bilkent/view-utilities.git 실행해야합니다. 
