cytoscape.js view utilities
v6.0.0
このcytoscape.js拡張機能は、MITライセンスの下で配布される非表示、ハイライト、マーキーズーム、無料のフォーム選択など、その他のビューユーティリティを提供します。
この拡張機能を使用するときは、次の論文を引用してください。
U. Dogrusoz、A。Karacelik、I。Safarli、H。Balci、L。Dervishi、およびMc Siper、「効率的な方法と大規模なネットワークの複雑さを管理するための容易にカスタマイズ可能なライブラリ」、PLOS ONE、13（5）：E0197238、2018。
ここをクリックしてください（元に戻しない）またはここ（元に戻す）デモについては
var instance = cy.viewUtilities(options)
@Paramオプション - 提供されていない場合、デフォルトのオプションが使用されます。デフォルトオプションについては、以下のセクションを参照してください。 highlightStylesはオブジェクトの配列です。オブジェクトは{node: ..., edge: ...}に従う必要があります。オブジェクトが選択されたときに強調表示されたスタイルをオーバーライドする場合は、 selectStylesが使用されます。 lassoStyle 、ラッソラインスタイルをオーバーライドするために使用されます。
例えば
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スタイルのインデックス。指定しない場合、最初のスタイルが使用されます。
Elementsの近隣（色オプションに基づいて）を強調します。ハイライト関数と同様に、要素と強調表示オプションの両方を引数で送信できます。要素のみが送信される場合、デフォルトのハイライト色が使用されます。
instance.removeHighlights(eles)
@Param ELES - ハイライトを削除する要素
ELESからハイライトを削除します。
instance.hide(eles)
@param eles - 非表示にする要素
エレを与えられた皮。
instance.show(eles)
@param eles - 表示する要素
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コールバック - 関数の最後に呼び出されます
ラッソツールを有効にします。
instance.disableLassoMode()
ラッソツールを無効にします。
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)
@ParamIDX - 変更されるスタイルのインデックス
@param nodestyle - ノード用のCytoscapeスタイル
@param edgestyle - エッジの細胞鏡スタイルidxで指定されたスタイルを変更します。
instance.addHighlightStyle(nodeStyle, edgeStyle)
@param nodestyle - ノード用のCytoscapeスタイル
@param edgestyle - エッジの細胞鏡スタイルhighlightStylesアレイに新しいスタイルを追加します。
instance.removeHighlightStyle(styleIdx): void
@param styleidx - 削除するスタイルのインデックス（0ベース）
highlightStylesアレイからスタイルを削除します。
instance.changeLassoStyle(styleObj)
@param styleobj - Linecolorおよび/またはLineWidthプロパティを備えたラッソラインスタイルオブジェクト
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-utilitiesbower install cytoscape-view-utilities 、または 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
} ) ; Plain HTML/JSにはrequire()が必要ないため、拡張機能が自動的に登録されています。
npm run build ：build ./src/** into cytoscape-view-utilities.js生産環境で、ファイルを最小限に抑えます。npm run build:dev ：build ./src/** into cytoscape-view-utilities.jsは、ファイルを最小限に抑えることなく開発環境で。 このプロジェクトは、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を実行する必要があります
