I'm looking to build an interactive node graph on a webpage where you can add nodes with various inputs and outputs and connect them together.
This is an example of what I'm looking to do:
I started to play around with vis.js but I'm not sure it will be able to do the above.
Any suggestions would be appreciated!
I'm looking to build an interactive node graph on a webpage where you can add nodes with various inputs and outputs and connect them together.
This is an example of what I'm looking to do:
I started to play around with vis.js but I'm not sure it will be able to do the above.
Any suggestions would be appreciated!
Share Improve this question edited Aug 12, 2018 at 19:08 YakovL 8,34713 gold badges73 silver badges112 bronze badges asked Aug 12, 2018 at 0:30 grillaBgrillaB 1051 silver badge5 bronze badges 1- Have a look at d3.js as an alternative - refer to the 'Examples' link as well as here for examples. – trashr0x Commented Aug 12, 2018 at 0:37
2 Answers
Reset to default 11For those who (like me) trying to find js libraries for creating interactive graphs here is the list:
Click on images for better quality.
react-flow | demo
vis-network | demo
DAG-ToDo | demo
flowy | demo
jsplumb | demo
react-diagrams | demo
butterfly | demo
Drawflow | demo
Generally, such broad questions in form of "is it possible to ...?" are frowned upon at StackOverflow, but the direct answer would be "yes, it is possible" and moreover, vis.js has an example of a manipulatable graph so I remend you to read the manupulation methods docs and the manipulation module docs which describe methods like addNode
, editNode
, deleteNode
etc.
However, you should note that all the interfaces are usually implemented outside the graph-containing canvas, in html (+js) because it's not trivial to put them inside canvas and, say, show attached to all nodes.