CODEWITHSUNDEEP
cytoscape.js
Marg
Marg

Reputation: 21

How to add nodes to Dagre layout with Cytoscape

I am trying to add nodes to a dagre graph through cityscape.js. The problem is that the nodes are not painted. This is the code that I currently have:

cy.add({
      group: "nodes",
      data: { id:"n0",name:"n0",weight: 75 },
  });
  $.ajax(url).done(function(jsonTree){
      var newNodes=[];
      for(var i=1;i<6;i++){
        //var child = jsonTree.result[i];
        newNodes.push(
          { group: "nodes", data: { id: "n"+i, name:"n"+i}},
          { group: "edges", data: { id: "e"+i, source: "n0", target: "n"+i } }
        );

      }
      cy.add(newNodes);

Any ideas? I have used loaded function to reload the graph but it does not work. I do not know if i have to use a specific function to reload the graph.

Thank you in advance.

Upvotes: 2

Views: 1119

Answers (1)

I don&#39;t use this profile anymo
I don&#39;t use this profile anymo

Reputation: 2676

You need to add positions for the new nodes. From the cytoscape.js docs:

It is important to note that the positions of newly added nodes must be defined when calling cy.add(). Nodes can not be placed in the graph without a valid position — otherwise they could not be displayed.

You'll want something like this for the for loop:

  var newNodes=[];
  for(var i=1;i<6;i++){
     newNodes.push(
          { group: "nodes", 
              data: { 
                id: "n"+i, 
                name:"n"+i
              },
           //this is the bit you missed: position
              position: {
               x:25*i,
               y:20*i
              }
           },
          { group: "edges", 
           data: { 
             id: "e"+i, 
             source: "testnode", 
             target: "n"+i 
           } 
          }
        );
      }
  cy.add(newNodes);

Here's a JSBin showing a graph with new nodes added dynamically

Upvotes: 2

Related Questions