sample function to be called when clicking on an object in the chart adding the new edge object to the adges array I used the available shapes of Cytoscape as types for the sample.Īngular.module('cytoscapeSample').controller('CytoscapeCtrl',function($scope, $rootScope) The $scope.objTypes object just holds types of grouping data. The controller also holds functions to add nodes and edges from the sample form. It can use just one, more complex, object for both, but I wrote it like that to be easier to read and understand.
Holding two objects – one for the nodes and one for the edges (the connecting lines between nodes). This CSS shapes the Cytoscape element in display.
< cytoscape cy-data="mapData" cy-edges="edgeData" cy-click="doClick(value)">Ĭy-data – object name that contains the Nodes dataĬy-edges – object name that contains the Edges dataĬy-click – function to be called in the Controller, when clicking on a Node.The intent is to provide an Angular component that fully covers the Cytoscape API via cytoscape. It is not the recommended way and just used to simplify the sample without adding a service and more complex ways to interact with the directive.Ĭheck out the sample /cytoscape cytoscape-angular is an Angular 12+ component for Cytoscape graphs. I have used here a simple $broadcast method and just kept the data in a controller. Note: In this article I’ll show a simple directive sample that wraps it and connects it to a controller. Load some sample data Load a sample session file: From the main menu, select File Open, and select the file sampleData/galFiltered.cys. Use the zooming buttons located on the toolbar to zoom in and out of the interaction network shown in the current network display. To examine a few styles, try out the following example: Step 1. Cytoscape provides four mechanisms for zooming: toolbar buttons, menu options, keyboard shortcuts and the scroll wheel. I needed a mind-map chart for Angular and found the amazing Cytoscape.js project.Ĭheck Cytoscape’s project site you’ll find lots of information about customizing the charts object. The Cytoscape distribution includes several predefined styles to get you started. Sorry but this sample uses old version of the Cytoscope.js and it isn’t maintained
0 kommentar(er)
