cytoscape.js view utilities
v6.0.0
Diese Cytoscape.js -Erweiterung bietet Versuchsunternehmen wie Hide/Show, Highlight, Festzelt Zoom und Auswahl der freien Form, die unter der MIT -Lizenz verteilt ist.
Bitte zitieren Sie das folgende Papier, wenn Sie diese Erweiterung verwenden:
U. DoGrusoz, A. Karacelik, I. Safarli, H. Balci, L. Dervishi und MC -Sister, "Effiziente Methoden und leicht anpassbare Bibliotheken zur Verwaltung der Komplexität großer Netzwerke", PLOS ONE, 13 (5): E0197238, 2018.
Klicken Sie hier (kein Rückgängig
var instance = cy.viewUtilities(options)
@Param -Optionen - Wenn nicht bereitgestellt werden, werden Standardoptionen verwendet. Die Standardoptionen finden Sie im folgenden Abschnitt. highlightStyles ist eine Reihe von Objekten. Die Objekte sollten dem Format {node: ..., edge: ...} folgen. selectStyles wird verwendet, wenn Sie die hervorgehobenen Stile überschreiben möchten, wenn die Objekte ausgewählt sind. lassoStyle wird verwendet, um den Lasso Line -Stil zu überschreiben.
z.B
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 - Eine Cytoscape.js -Sammlung (Sammlung von Elementen), die hervorgehoben werden soll
@param idx - Der Index des Cytoscape.js -Stils. Wenn Sie es nicht angeben, wird der erste Stil verwendet.
Wenden Sie die Stilklasse auf die angegebenen Elemente an. Die Stilklasse wird mit seinem Index angegeben
instance.highlightNeighbors(eles, idx = 0)
@Param Eles - Eine Cytoscape.js -Sammlung (Sammlung von Elementen), die hervorgehoben werden soll
@param idx - Der Index des Cytoscape.js -Stils. Wenn Sie es nicht angeben, wird der erste Stil verwendet.
Markiert die Nachbarschaft von Elementen (basierend auf der Farboption). Ähnlich wie bei der Highlight -Funktion können entweder die Elemente und die Hervorhebungsoption in den Argumenten gesendet werden. Wenn nur die Elemente gesendet werden, wird die Standard -Highlight -Farbe verwendet.
instance.removeHighlights(eles)
@Param Eles - Elemente zum Entfernen von Highlights
Entfernen Sie Highlights von Eles.
instance.hide(eles)
@Param Eles - Elemente zu verbergen
Versteckt gegeben Eles.
instance.show(eles)
@Param Eles - Elemente zu zeigen
Unheilt gegebenen Eles.
instance.showHiddenNeighbors(eles)
@Param Eles - Elemente, um versteckte Nachbarn zu zeigen
Unhides verborgene Neigbors gegebener Eles. Beachten Sie, dass zusammengesetzte Knoten nicht wie erwartet respektiert werden.
instance.zoomToSelected(eles)
@Param Eles - Elemente zum Zoomen
Zoom zu ausgewählten Eles.
instance.enableMarqueeZoom(callback)
@param Callback - wird am Ende der Funktion aufgerufen
Ermöglicht Marquee Zoom. Es wird automatisch aufgerufen, wenn Strg+-Schiftschlüssel niedrig sind.
instance.disableMarqueeZoom()
Deaktiviert Marquee Zoom. Es wird automatisch aufgerufen, wenn Strg+-Schiftschlüssel abgelaufen sind.
instance.enableLassoMode(callback)
@param Callback - wird am Ende der Funktion aufgerufen
Aktiviert das Lasso -Tool.
instance.disableLassoMode()
Deaktiviert das Lasso -Tool.
instance.getHighlightStyles()
Gibt die aktuellen highlightStyles zurück, die eine Reihe von Objekten wie unten sind
[
{ 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()
Gibt alle derzeit verwendeten Cytoscape.js -Stilklassen zurück
instance.changeHighlightStyle(idx, nodeStyle, edgeStyle)
@param idx - Index des Stils, der sich verändert wird
@param Knoyle - Cytoscape -Stil für Knoten
@Param Edgestyle - Cytoscape -Stil für Kanten
Ändert den mit idx angegebenen Stil.
instance.addHighlightStyle(nodeStyle, edgeStyle)
@param Knoyle - Cytoscape -Stil für Knoten
@Param Edgestyle - Cytoscape -Stil für Kanten
Fügt dem highlightStyles -Array einen neuen Stil hinzu.
instance.removeHighlightStyle(styleIdx): void
@param styleIdx - Index des zu löschen stilvollen Stils (0 basiert)
Entfernt den Stil aus highlightStyles -Array.
instance.changeLassoStyle(styleObj)
@param styleobj - Lasso Line Style -Objekt mit Linecolor- und/oder Linewidth -Eigenschaften
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)
Laden Sie die Bibliothek herunter:
npm install cytoscape-view-utilities ,bower install cytoscape-view-utilities , oder require() die Bibliothek, je nachdem, was für Ihr Projekt geeignet ist:
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
} ) ; Einfaches HTML/JS hat die Erweiterung automatisch für Sie registriert, da no require() erforderlich ist.
npm run build : Build ./src/** in cytoscape-view-utilities.js in der Produktionsumgebung und minimieren Sie die Datei.npm run build:dev : Build ./src/** in cytoscape-view-utilities.js in der Entwicklungsumgebung, ohne die Datei zu minimieren. Dieses Projekt soll automatisch an NPM und Bower veröffentlicht werden. Zu veröffentlichen:
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 ausführen 
