cytoscape.js view utilities
v6.0.0
Cette extension Cytoscape.js fournit des utilitaires de vue diverses tels que Hide / Show, Highlight, Marquee Zoom et Free Form Sélection, distribué sous la licence MIT.
Veuillez citer l'article suivant lorsque vous utilisez cette extension:
U. Dogrusoz, A. Karacelik, I. Safarli, H. Balci, L. Dervishi et Mc Siper, "Méthodes efficaces et bibliothèques facilement personnalisables pour gérer la complexité des grands réseaux", PLOS ONE, 13 (5): E0197238, 2018.
Cliquez ici (pas d'annulation) ou ici (Annuable) pour une démo
var instance = cy.viewUtilities(options)
@param Options - Si ce n'est pas fourni, les options par défaut seront utilisées. Voir la section ci-dessous pour les options par défaut. highlightStyles est un tableau d'objets. Les objets doivent suivre le format {node: ..., edge: ...} . selectStyles sera utilisé si vous souhaitez remplacer les styles en surbrillance lorsque les objets sont sélectionnés. lassoStyle sera utilisé pour remplacer le style Lasso Line.
par exemple
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 - Une collection cytoscape.js (collection d'éléments) à mettre en évidence
@param idx - L'indice du style cytoscape.js. Si vous ne le spécifiez pas, le premier style sera utilisé.
Appliquez une classe de style aux éléments spécifiés. La classe de style est spécifiée avec son index
instance.highlightNeighbors(eles, idx = 0)
@param eles - Une collection cytoscape.js (collection d'éléments) à mettre en évidence
@param idx - L'indice du style cytoscape.js. Si vous ne le spécifiez pas, le premier style sera utilisé.
Met en évidence le quartier des éléments (basé sur l'option de couleur). Semblable à la fonction de surbrillance, les éléments et l'option de mise en évidence peuvent tous deux être envoyés dans les arguments. Si seuls les éléments sont envoyés, la couleur de surbrillance par défaut est utilisée.
instance.removeHighlights(eles)
@param eles - Éléments pour supprimer les points forts
Supprimer les points forts d'Eles.
instance.hide(eles)
@param eles - éléments à cacher
Cache donnée eles.
instance.show(eles)
@param eles - éléments à montrer
RESTAGE DONNÉ ELES.
instance.showHiddenNeighbors(eles)
@param eles - Éléments pour montrer des voisins cachés
RESTAGE NEIGBORS CHIDES D'ELES DONNÉES. Notez que les nœuds composés ne sont pas respectés comme prévu.
instance.zoomToSelected(eles)
@param eles - éléments pour zoomer
Zoom vers des ELES sélectionnés.
instance.enableMarqueeZoom(callback)
@param rappel - est appelé à la fin de la fonction
Active le zoom de marquee. Il est automatiquement appelé lorsque les touches de décalage Ctrl + sont en baisse.
instance.disableMarqueeZoom()
Désactive le zoom de marquee. Il est automatiquement appelé lorsque les clés de changement Ctrl + sont en hausse.
instance.enableLassoMode(callback)
@param rappel - est appelé à la fin de la fonction
Active l'outil Lasso.
instance.disableLassoMode()
Désactive l'outil Lasso.
instance.getHighlightStyles()
Renvoie highlightStyles actuels qui est un tableau d'objets comme ci-dessous
[
{ 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()
Renvoie toutes les classes de style Cytoscape.js actuellement utilisées
instance.changeHighlightStyle(idx, nodeStyle, edgeStyle)
@param idx - Index du style qui va être modifié
@param nœudyle - style cytoscape pour les nœuds
@param EdgeTyle - style cytoscape pour les bords
Modifie le style spécifié avec idx .
instance.addHighlightStyle(nodeStyle, edgeStyle)
@param nœudyle - style cytoscape pour les nœuds
@param EdgeTyle - style cytoscape pour les bords
Ajoute un nouveau style au tableau highlightStyles .
instance.removeHighlightStyle(styleIdx): void
@param StyleIdx - Index du style à supprimer (0 basé)
Supprime le style du tableau highlightStyles .
instance.changeLassoStyle(styleObj)
@param styleobj - objet de style Lasso Line avec des propriétés LineColor et / ou 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)
Téléchargez la bibliothèque:
npm install cytoscape-view-utilities ,bower install cytoscape-view-utilities , ou require() la bibliothèque selon votre projet:
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 a automatiquement l'extension enregistrée pour vous, car aucun require() est nécessaire.
npm run build : build ./src/** dans cytoscape-view-utilities.js dans l'environnement de production et minimiser le fichier.npm run build:dev : build ./src/** dans cytoscape-view-utilities.js dans l'environnement de développement sans minimiser le fichier. Ce projet est configuré pour être automatiquement publié sur NPM et Bower. Publier:
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 
