Sigma.js animate edge drawing

[akurteva1516]

Hello,
I have the following code for animate drawing of the nodes but i get the error: The edge target must have an existing node id. and TypeError: undefined is not an object (evaluating ‘sigma.plugins.animate’).

var dictionary={
  "nodes": [
    {
      "id": "n0",
      "label": "0",
      "x": 0,
      "y": 0,
      "size": 3
    },
    {
      "id": "n1",
      "label": "1",
      "x": 3,
      "y": 1,
      "size": 2
    },
    {
      "id": "n2",
      "label": "2",
      "x": 1,
      "y": 3,
      "size": 1
    },
    {
      "id": "n3",
      "label": "3",
      "x": 5,
      "y": 2,
      "size": 2
    },
    {
      "id": "n4",
      "label": "4",
      "x": 0,
      "y": 2,
      "size": 2
    },
    {
      "id": "n5",
      "label": "5",
      "x": 1,
      "y": 3,
      "size": 1
    }
  ],
  "edges": [
    {
      "id": "e0",
      "source": "n0",
      "target": "n1"
    },
    {
      "id": "e1",
      "source": "n1",
      "target": "n2"
    },
    {
      "id": "e2",
      "source": "n2",
      "target": "n0"
    },
    {
      "id": "e3",
      "source": "n0",
      "target": "n3"
    },
{
      "id": "e4",
      "source": "n3",
      "target": "n4"
    }
,
{
      "id": "e5",
      "source": "n4",
      "target": "n5"
    }
,
{
      "id": "e6",
      "source": "n5",
      "target": "n6"
    }
,
{
      "id": "e7",
      "source": "n6",
      "target": "n7"
    }

  ]
}
s = new sigma({
  graph: dictionary,
  container: 'graph-container',
  settings: {
    animationsTime: 2000
  }
});

function animate() {
  sigma.plugins.animate(s,
    {
        x: 'target_x',
        y: 'target_y'
    },
    {
      onComplete: function() {
          s.graph.nodes('n0').hidden = !(s.graph.nodes('n0').hidden);
          animate();
      }
    }
  );
}
animate();

[m_hutley]

The error should have flagged a specific line and column number for you to inspect. (On the right, something like “my.js:4:90” (Read as: In my.js, Line 4, Position 90)… some browsers dont provide the character position, but at least the line number.)

[m_hutley]

@akurteva1516

“id”: “e7”,
“source”: “n6”,
“target”: “n7”
}

Also, this edge is trying to connect nodes “n6” and “n7”. You dont have nodes with that name.

[akurteva1516]

Hello,
I corrected the code and it works. Now I am trying to use a .json file. How can I use the nodes and edges from the json file in the same way?

 function autoDraw(seconds){
      
        var mySigma2;

        mySigma2 = new sigma({ 
        graph: { "nodes":dictionary.nodes,"edges":[] },//fills only with the nodes
        container: 'graph-container',
        settings: {
           
            minEdgeSize: 1,
            maxEdgeSize: 5,
            
        }
      });
           var jsonData= sigma.parsers.json(
            'data/arctic.json',
            
          );
      
       



       
        var interval = setInterval(function() {
        if (seconds < 0) clearInterval(interval); //break the interval
        seconds--;
          if(!mySigma2) { return; } //Don't do anything until the nodes have been set up.
          var edgeinplace = mySigma2.graph.edges().length;
          if(edgeinplace < dictionary.edges.length) { //Prevent trying to push the button too many times.
           mySigma2.graph.addEdge(dictionary.edges[edgeinplace]);
           mySigma2.graph.edges().forEach(function(edgeinplace){
           edgeinplace.type="arrow";
          
           });

           mySigma2.refresh();
         }
          
        
    }, 150);
        //Drag and drop the nodes
       
          
      // Initialize the dragNodes plugin:
        var dragListener = sigma.plugins.dragNodes(mySigma2, mySigma2.renderers[0]);

        dragListener.bind('startdrag', function(event) {
          console.log(event);
        });
        dragListener.bind('drag', function(event) {
          console.log(event);
        });
        dragListener.bind('drop', function(event) {
          console.log(event);
        });
        dragListener.bind('dragend', function(event) {
          console.log(event);
        });      
     
        mySigma2.refresh();

    
}

[m_hutley]

@akurteva1516

{ “nodes”:dictionary.nodes,“edges”: }

Well, your graph is being built from the dictionary variable.
So perhaps you might be trying to load a file’s contents into that variable before calling autoDraw.
Reading through sigma.parsers.json’s documentation, you can implement this as a callback.
Find where you invoke autoDraw, and instead put this:

sigma.parsers.json('data/arctic.json',function(datasig) { 
      dictionary.nodes = datasig.graph.nodes();
      dictionary.edges = datasig.graph.edges();
      autoDraw(seconds);
});