CODEWITHSUNDEEP
javascripthtmlcsswebcytoscape.js
Cold_Fire
Cold_Fire

Reputation: 132

using mapData() after adding several edges by cy.add() in cytoscape.js

I am using cytoscape.js for converting a raw txt data to cytoscape.js graph. for that, first I make the graph with : var cy = cytoscape({...}) without any elements.Then after reading nodes and edges from txt file, I add them with this for nodes :

        cy.add({
            data: {id: keys[i]}
        }
    );

and this for edges:

        cy.add({
        data: {
            id: 'edge' + i,
            source: edges[i].source,
            target: edges[i].target,
            label: edges[i].weight
        }

    });

Then i want to apply 'width': 'mapData(weight, 0, 100, 1, 6)'. how can I do that? I tried these: 1) using mapData() in edge selector when making cy variable.(it doesnt works for added edges and nodes)

2) using mapData() for each edge after making each of them: cy.$('#edge' + i).style('width','mapData(weight, 0, 100, 1, 6)');

3) using mapData() after making all nodes and edges : cy.elements('edge').style('line-color','mapData(weight,1,6,blue,green)');

none of them works!

Upvotes: 1

Views: 1453

Answers (1)

Stephan T.
Stephan T.

Reputation: 6074

Maybe like this:

var cy = window.cy = cytoscape({
    container: document.getElementById('cy'),
    style: [
      {
        selector: 'node',
        style: {
          'label': 'data(name)',
          'width': 'mapData(weight, 0, 100, 1, 6)',
          'height': 'mapData(weight, 0, 100, 1, 6)',
        }
      }
    ]
  });

cy.add([
  { group: "nodes", data: { id: "n0", name: "node0", weight: "x"} },
  { group: "nodes", data: { id: "n1", name: "node1", weight: "y"} },
  { group: "edges", data: { id: "e0", source: "n0", target: "n1" } }
]);

cy.ready(function ()  {            // Wait for nodes to be added
    cy.layout(                     // Call layout
        name: 'yourDecision'
    ).run();
});

I define the cytoscape instance on initialization and there I define the style of the nodes/edges/... .

Upvotes: 2

Related Questions