EzDevInfo.com

Dealing with IDs with blank spaces (Cytoscape.js)

I'm implementing a prerequisite graph using Cytoscape.js. But the problem is, when I set the id with the course name, (for example: Beginning Programming), I can't properly select the node because of the blank space in the course name.

temp.group = "nodes";
temp.data = {id: a, label: b}; // A: "Beginning Programming" B: "1111"
cy.add(temp);

Then, when I do this:

cy.$("Beginning Programming");

It says it is an invalid selector.

Is there a way of doing so?

How to reload graph in cytoscape.js?

Is there a function that resets the graph to it's freshly loaded state? I've tried cy.reset() but that just resets zoom and pan, not restoring to the virgin graph.

Also is there a way to restore all removed elements?

Thanks!

select nodes whose attribute (array-type) contains a certain value with cytoscape.js

I am currently visualizing a network where the nodes have an attribute of type list, example:

{"data": {"name": "b", "go": ["c", "d", "f"], "id": "n0"}, "group": "nodes"},
{"data": {"name": "a", "go": ["a", "b", "c"], "id": "n1"}, "group": "nodes"},
{"data": {"target": "n0", "source": "n1", "id": "e1"}, "group": "edges"}

Is it possible, using cytoscape.js, to select all the nodes whose list-attribute ('go' in the example) contains a certain value?

Something like:

cy.elements('node[go.contains("b")]')

which would select node n1...

Many thanks in advance

Avoid edge-node overlapping in cytoscape.js

Created graph using cytoscape.js. I have set the layout to 'grid'. Need to resolve following problem: original graph-

There is edge from Host3 to Host1 as well as from Host5 to host1,Edge from Host 5 to Host 1 overlapping the edge from Host3 to Host1.

Overlapping edge should appear like:

How to do it? Thanks !

Set Node Size with the amount of edges in cytoscape.js

I'm trying to draw a molecular similarity network using cytoscape.js. I want to set node size to the amount of edges in network. Now I have network data as JSON Format. I want to now that how set each node size using node degree. Any help is appreciated.

Thanks

Exporting and importing JSON data to Cytoscape.js

Based on this question and answer, I've made this JSFiddle.

What I'm trying to do is to find a way to properly export / import JSON data to cytoscape.js.

I'm using JSON.stringify(cy.json()) to get JSON data from elements, and on the other hand I'm cleaning the cy area and using cy.add(text-input) to add the elements back.

I.e.: you can add a node, copy it's JSON data generated, then you can refresh the browser and paste the JSON data from node directly, tryng to add it to cy.

But I couldn't get this to work, and I can't really figure out where I'm wrong (propably using the cy.add function). Always geting both errors:

An element must be of type 'nodes' or 'edges'; you specified 'undefined'

Uncaught TypeError: Cannot read property 'single' of undefined

Any ideas?

Thanks in advance.

cytoscape.js zoom to fit currently selected nodes

I wish to zoom the cyjs view to fit (nicely contain) the currently selected nodes. nodes could be selected manually, or programmatically. If only a small network neighborhood has been selected, then the zoom-in would be pretty dramatic. If distant nodes are in the selection, then the zoom in might not even be noticeable.

cy.fit(<padding>) 

works great to display the entire network within the window. But try as I may, I cannot find

cy.fitSelected()

or some functional equivalent.

Suggestions, anyone?

Thanks!

• Paul

What is the difference between D3.js and Cytoscape.js?

What is the difference between D3.js and Cytoscape.js?

I mean why would someone chose Cytoscape over D3.js?

Setting random seed for cytoscape.js force-directed layout?

In cytoscape.js 2.0.0beta1, is it possible to get the arbor layout to produce a deterministic result? I'd like to be able to do the equivalent of setting the random seed it uses to a fixed number.

My sample code is here: http://www.strgen.org/~jmc/cs2/ppi1.html

If you reload it, you'll notice that the nodes can end up in very different layouts each time the page is loaded.

Add an edge label with Cytoscape.js

How can I add a label on an edge using Cytoscape.js?

How to highlight the path between two nodes in CYTOSCAPE JS

i can create a graph using cytoscape js library . i am following the this tutorial and i implement like this.

CODE:

$(function(){ // on dom ready

$('#cy').cytoscape({
  style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'content': 'data(id)'
      })
    .selector('edge')
      .css({
        'target-arrow-shape': 'triangle',
        'width': 4,
        'line-color': '#ddd',
        'target-arrow-color': '#ddd'
      })
    .selector('.highlighted')
      .css({
        'background-color': '#61bffc',
        'line-color': '#61bffc',
        'target-arrow-color': '#61bffc',
        'transition-property': 'background-color, line-color, target-arrow-color',
        'transition-duration': '0.5s'
      }),

  elements: {
      nodes: [
        { data: { id: 'a' } },
        { data: { id: 'b' } },
        { data: { id: 'c' } },
        { data: { id: 'd' } },
        { data: { id: 'e' } },
        { data: { id: 'f' } },
        { data: { id: 'g' } }
      ], 

      edges: [
        { data: { id: 'ab', weight: 1, source: 'a', target: 'b' } },
        { data: { id: 'ac', weight: 2, source: 'a', target: 'c' } },
        { data: { id: 'bd', weight: 3, source: 'b', target: 'd' } },
        { data: { id: 'be', weight: 4, source: 'b', target: 'e' } },
        { data: { id: 'cf', weight: 5, source: 'c', target: 'f' } },
        { data: { id: 'cg', weight: 6, source: 'c', target: 'g' } }       
      ]
    },

  layout: {
    name: 'breadthfirst',
    directed: true,
    roots: '#a',
    padding: 5
  },

  ready: function(){
    window.cy = this;

    var bfs = cy.elements().bfs('#a', function(){}, true);

    var i = 0;
    var highlightNextEle = function(){
      bfs.path[i].addClass('highlighted');

      if( i < bfs.path.length ){
        i++;
        setTimeout(highlightNextEle, 1000);
      }
    };

    // kick off first highlight
    highlightNextEle();
  }
});

}); // on dom ready

on my implementation i need to highlight the path between the nodes d and g.

How to find the path between the nodes and highlight them?

Always show overlay for edges in Cytoscape.js

Is there a way to always show the edge line overlay in Cytoscape.js

The gif below show that the overlay is shown when the edge is active (after select or tap)

Here is the current styling I have :

var cy = cytoscape({
    container: document.getElementById('cy'),
    style: cytoscape.stylesheet()
        .selector('node')
        .css({
            'background-color': '#69B8B6',
            'border-color': '#AABFB8',
            'border-width': '2px',
            'width': '35px',
            'height': '35px',
            'content': 'data(name)',
            'font-size': '11px',
            'font-weight': 'bold',
            'color': '#337AB7'
        })
        .selector('edge')
        .css({
            'target-arrow-shape': 'triangle',
            'source-arrow-shape': 'circle',
            'curve-style': 'bezier',
            //'control-point-weight': 0.5,
            'content': 'data(name)',
            'font-size': '7px',
            'line-color': '#E4860D',
            'line-style': 'dotted',
            'overlay-color': '#c0c0c0',
            'overlay-padding': '50px',
            'overlay-opacity': 100
        })
        .selector('node:selected')
        .css({
            'background-color': '#E4860D'
        })
        .selector(':active')
        .css({
            'line-color': '#E4860D',
            'line-style': 'solid',
            'overlay-color': '#c0c0c0',
            //'overlay-padding': '100px',
            'overlay-opacity': 100
        }),
    layout: {
        name: 'grid',
        padding: 10
    },
    userZoomingEnabled: false,
    ready: function(){ console.log('ready') }
});

However this has no effect of the edge overlay for non active states.

cytoscape.js: wrong mouse pointer position after container change

I use cytoscape.js 2.2.5 to draw a graph in an angular.js app and I can properly select nodes. When the <div> with the graph moves, the mouse pointer position on the canvas is not updated. That means I have to click on the 'old' position of a node to select it.

I tried cy.reset(), cy.center() and cy.fit(), but the mouse pointer position doesn't change.

How can I update the graph after I change the position of the cytoscape <div>?

Original page:

After change of <div> position

When I remove the blue panel and the graph <div> moves up, the mouse pointer position is wrong. I use the ng-show directive (which uses css hidden/visible).

How to set 'cose' layout in cytoscape.js for better node spacement?

I'm using cytoscape.js 2.3.9 and I'm playing with some layouts. I'm now rendering about 150 nodes, but I wish to go up till 1000-1500. There are about 25 nodes with 1-50 posible childs. My best approach for what I need has been with 'cose' layout, but I'm quite far from my final expected result.

I've tried several configurations playing with its attributes values as documented, but I'm no so much in force directed simulations and feel like trying without much sense.

With this config:

layout: {
  'name':'cose', 
  'animate':false, 
  'refresh':.1,
  'edgeElasticity' : 20,
  'fit': true,
  'gravity' : 100     
}

I get this result (red line shows the size of the containing div):

I wish the graph fits better, leaving less blank space and child nodes to be closer to its parent. Sometimes with few elements fits better (but not always), like this:

But even so some child nodes overlap its parent and others get so far.

Any advice on attributes values or any other layout that fit better on my purpouse?

Thank you.

using two graph panels in cytoscape.js

I need to display two graph panels in the same page in Cytoscape.js. Each panel contains a network responsive to the events from the other panel. This used to be simple in the Flash version of cytoscape web.

I was declaring two visualization objects:

var vis1 = new org.cytoscapeweb.Visualization(div_id1, options);
var vis2 = new org.cytoscapeweb.Visualization(div_id2, options);

,them after declaring styles and object listeners I was drawing them:

vis1.draw({ network: networ_json1 , visualStyle: visual_style1});
vis2.draw({ network: networ_json2 , visualStyle: visual_style2});

The listeners are easy to implement because you have access to both objects the same time:

vis1.addListener("select", "nodes", function(evt) {
    for (var i in evt.target){
        node_ids = evt.target[i].data.conN;
        var  data1 = { selected: "1"};
        if(node_ids.length >= 1){
             vis2.updateData("nodes", node_ids, data1)
             vis2.select("nodes",node_ids);
        }
    }
});

Now I want to upgrade this to Cytoscape.js but I got stuck to displaying two panels on the same page. 1) Let me know where I go wrong and 2) Please give me a hint on how to proceed next. A small example of a node being selected in panel 2 if it is selected in panel 1 would be great!

Here is the test.html:

<html>
    <head>
        <title>Cytoscape.js double panel test</title>
        <script src="js/jquery.js"></script>
        <script src="js/cytoscape.min.js"></script>
        <script src="js/simple.js"></script>
        <script></script>
    </head>
    <body>
    <div id="cy1" style="height:600px;width:800px;border:1px solid #777;"></div>
    <div id="cy2" style="height:600px;width:800px;border:1px solid #777;"></div>
    </body>
</html>

And here is simple.js. Only panel two will display a network, instead of both.

$(function(){
    var nodes1 = [];
    for (var i = 0; i < 5; i++) {
        nodes1.push({
            data:{
                id: "n" + i
            },
            group: 'nodes1'
        });
    }

    var edges1 = [];
    edges1.push({ data: { id: 'e1', source: 'n1', target: 'n2' }, group: 'edges1' })
    edges1.push({ data: { id: 'e2', source: 'n1', target: 'n3' }, group: 'edges1' })
    edges1.push({ data: { id: 'e3', source: 'n1', target: 'n4' }, group: 'edges1' })
    edges1.push({ data: { id: 'e4', source: 'n2', target: 'n0' }, group: 'edges1' })
    edges1.push({ data: { id: 'e5', source: 'n3', target: 'n2' }, group: 'edges1' })

    $("#cy1").cytoscape({
        elements: {
            nodes: nodes1,
            edges: edges1
        }
    });

    var nodes2 = [];
    for (var i = 0; i < 5; i++) {
        nodes2.push({
            data:{
                id: "n" + i
            },
            group: 'nodes2'
        });
    }

    var edges2 = [];
    edges2.push({ data: { id: 'e1', source: 'n1', target: 'n2' }, group: 'edges2' })
    edges2.push({ data: { id: 'e2', source: 'n1', target: 'n3' }, group: 'edges2' })
    edges2.push({ data: { id: 'e3', source: 'n1', target: 'n4' }, group: 'edges2' })
    edges2.push({ data: { id: 'e4', source: 'n2', target: 'n0' }, group: 'edges2' })
    edges2.push({ data: { id: 'e5', source: 'n3', target: 'n2' }, group: 'edges2' })

    $("#cy2").cytoscape({
        elements: {
            nodes: nodes2,
            edges: edges2
        }   
    });

});