can I use custom svgs

[knightswatch3]

I am new to the visx library. But I am curious to know more about this.

Can I use custom svgs for the dendogram nodes ?

[williaster]

Yep! Here's a demo.

[knightswatch3]

@williaster Appreciate the response.

Does visx allow me to add/delete nodes on the DOM. Is that handled without the conflicts with the DOM manipulation my FE handles ?
How smooth is it ?
Also, can I animate the nodes rendering ? deleting ?
Can you please point me to some examples or articles ?
TIA.

[williaster]

@visx/network is svg based, and it expects react to handle all of the DOM manipulation. If you're not familiar with react I'd suggest starting with that.

@visx/network requires you to determine the layout for your network and position your nodes + relationships yourself, it does not include any layout algorithms nor does it handle animation versus something like cytoscape which handles it all for you. You can find all of our examples on the project website here.

[knightswatch3]

@williaster I am experienced with React. But my question is, if I'd like to represent a DAG and have event handlings( to add,delete,modify nodes) to the dendgrams/tree/network diagrams. What do you suggest ?

Cytoscape or Visx ?

[williaster]

The hardest parts of network visualization are

• layout calculation (dagre, etc. for a DAG view)
• performance (for large graphs where SVG is not performant and you need canvas or webgl)

Since there are other existing solutions for those (such as cytoscacpe), so far we have decided not to re-implement them in visx. The existing @visx/network package does very little, and so for your use case you would need to write a layout algorithm and potentially handle perf issues if you DAGs are large.

For a recent internal project for viewing DAGs at Airbnb I chose react-cytoscape which is a simple wrapper around cytoscape, I would probably recommend that because its so battle-tested, has great docs, and will support almost any type of visual customization you need. We integrated visx-based tooltips on top of it, but otherwise it worked well.