Show link between nodes in cytoscape.js

Question

I am looking for software that allows me to draw relationships between objects with automatic drawing and user interaction. I saw cytoscape.js, and it seems like a really good option, but I want to know if the relationship name can be visualized with this software.

The purpose of the example is to draw two people and show their relationship, for example, that they are brothers.

Person1 ====== brother =====> Person2

Do I need to modify the code for this?

Answer 1

You do not need to change the code. This functionality is already integrated. You will need to know how to use mappers and cytoscape style definitions .

If you look at the source of the demo that they used here , you will see that when you define the css style cytoscope, you need to set the content attribute, which you could then use mappers and specify which attribute in the node / edge data you want to display. This has already been done with the id attribute for nodes as follows:

 style: cytoscape.stylesheet() .selector("node") .css({ "content": "data(id)", "shape": "data(shape)", "border-width": 3, "background-color": "#DDD", "border-color": "#555", }) 

You can do the same for the ribs. Hope this helps.