Finding the corresponding node in array using edges in javascript

JavaScript
1

Hello,
I have a json file with edges and nodes and I am trying to display first the nodes that are supposed to be connected rather that just as they are shown in the json file. For example I want to display a node1 and then the node it is connected to rather than just the next node in the json that is not connected to node1.

{"edges":[
{"source":"473","target":"313","id":"6432"},
{"source":"285","target":"50","id":"357"},
{"source":"441","target":"1394","id":"4376"},.....

"nodes":[
{"label":"Sciences De La Terre","x":1412.2230224609375,"y":-2.055976390838623,"id":"262","color":"rgb(255,204,102)","size":8.540210723876953},
{"label":"Champ","x":-933.5524291992188,"y":239.07545471191406,"id":"586","color":"rgb(255,51,51)","size":4.0},
{"label":"Chaîne Trophique","x":1256.1710205078125,"y":-1671.3907470703125,"id":"580","color":"rgb(153,255,0)","size":4.936610698699951},.....
2

So, here’s my question:
Is source->target a one way relationship? Or, for example, if I display node 1394, do you want to display node 441? (IE: Is this a Tree, or a Map)

3

You can create a map of nodes, so that fetching the appropriate object becomes easier.

var nodeMap = json.nodes.reduce(((map, node) => map.set(node.id, node)), new Map())
4

I want the first node to be the as specified by the edge. So I want it to be like a sequence because I want to show the node-edge-targetnode and if the target node is not displayed the edge cant be shown.

5

Basically, I want to display one edge at a time without the nodes already displayed on my canvas.

6

Sounds very familiar.

So, the simple answer is:
For the current node:
Find all Edges such that current node as Source, that have a Target that has been rendered, and that it itself has not already been rendered.
If The Array of Results has some length:
Pop the first one off the array, and render it.
Else:
Change current node to the next rendered node and repeat.

7

This is what I came up with. It finds the corresponding edge but doesnt do anything.


                           for (var i = 0; i < nodeinplace; i++) {

                           	var currentEdge=myObj.edges.find(edges=>edges.Source===nodeinplace[i]);

                           	

		                           	//var edgeinplace = mySigma.graph.edges().length;
		                          if(currentEdge < myObj.edges.length) { //Prevent trying to push the button too many times.
		                           mySigma.graph.addEdge(myObj.edges[currentEdge]);
		                           mySigma.graph.edges().forEach(function(currentEdge){

		                               
		                           currentEdge.type="arrow";

		                          
		                       
		                          });


		                          // Refresh the renderers to make the changes effective:
		                          mySigma.refresh();
		                         }



                           };


                          // Refresh the renderers to make the changes effective:
                          mySigma.refresh();
                         }
8

I’m diving into the discussion kind of late, but it seems that you are using currentEdge incorrectly.

You used array.find() which returns the object, not the index. So your test for if(currentEdge < myObj.edges.length) will always fail.

Change the test to if(currentEdge !== undefined), and also change mySigma.graph.addEdge(currentEdge), since you are using an object rather than an index.

Also, be aware that the changes to your sigma edges will very likely change the original objects as well. Adding the .type=“arrow” will probably affect myObj.edges.

9

So for those that come to the thread, it assumes knowledge contained here.

Simply put, there’s a multitude of things that are going wrong in this script.
I will assume, for the sake of sanity, that nodeinplace is defined to be mySigma.graph.nodes().length.

  1. You’ve filtered for the first part of the sentence I gave you but ignored the other 2 parts of it. Those are also important.
  2. Immediately after that, you invoke currentEdge in a comparator. Objects don’t really have a sense of “less than”, especially when compared to a number. As a hint, find returns undefined if it didn’t find anything.
  3. The loop as constructed will place edges for all nodes currently on the graph. If you want to only place one at a time, you’ll need to abort the for loop with some form of control structure (break or return, depending on the calling path) You should only invoke mySigma.refresh() if you’ve actually added something to the graph.
10

So how do I : Find all Edges such that current node as Source, that have a Target that has been rendered, and that it itself has not already been rendered?

11

So this is where we’re wandering towards that line of “Did you understand the concept, or have you just copied my code”.

How can you tell if a node is in your graph?
How can you tell if an edge is in your graph?

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.