which library to use to draw simple graphs nodes,links in react? [closed]

Question

I see react-d3. The last I used it for charts (prior to React), it was great until the layout of legends, margins, labels on the axes need adjusting. Using c3 and other libs on top of d3, made things easier.

Now I need to draw graphs - random node/link/group diagrams. I see Force layouts - but not simple graphs in react-d3. I looked at Cytoscape - it does not have an official React build, which seems to be in works (there is a wrapper I found on stack-overflow, but i am hesitant to use it until an the cyto team releases it.

The question therefore is: - If I use react-d3, where can i find some samples (not charts and not 'Force' layouts) - if using react-d3 directly is a bit too low-level, is a good library atop d3, now available for React? (I am willing to sacrifice the ultra-flexibility of d3, for ease of a simple library).

Any help and pointers is most welcome.

Thank you.

Tropic

Answer 1

Tl;dr: Avoid react-* wrapper packages (for external libs) when you can. They'll tend to limit you later for all but basic usecases.

There's not really any reason to wait on a React adaptor for Cytoscape. The adaptor is being built for some guys who want to create really simple (mostly) visualisation-only React.Components -- like a simple page that goes along with a scientific publication.

In general, those react-* packages for external libs tend to fall into one of two categories, (1) simple libs or (2) complex libs. For (1), a react-* package could be OK if the lib it's wrapping has a small featureset to cover. For (2), these wrapper packages tend to cover only a small portion of the API. For both (1) and (2), you depend on the wrapper being up to date -- or being locked out of features.

As your app gets more and more developed, would you want to risk having to do a rewrite because your app is highly coupled to a react-* wrapper package that your app outgrew?

By and large, there's not that much benefit of using react-* wrapper packages. Especially for more complex cases like yours, you just limit what features you can use and how you can use them.

Whatever graph lib you choose -- be it Cytoscape or otherwise -- I recommend just writing your own React.Component tailored to what your app needs.

Personally, the only react-* packages I would use are ones that add features directly to React, like animations, routing, etc.

Sulphide

Answer 2

The resources above are 4 years old so thought to update. I would use react-digraph or react-flow - Both seems to be well supported.

Adelaadelaida

Answer 3

you can have a look at the below library,

https://github.com/lavrton/react-konva

https://github.com/Flipboard/react-canvas

https://github.com/reactjs/react-art

https://github.com/alex3165/react-leaflet-draw

https://github.com/PaulLeCam/react-leaflet

Inextirpable

reviewing the links above, react-konva comes closest to what I am looking for. It is however a low level library which has collection of simple shapes and lines.. this means i need to define/create a 'component' and its data structure to be able to draw graphs (mine are acyclic graphs). A lib with built-in support for graph (specified as a json) and ability to attach events to items in graph, with the lib managing the tree & its events as a whole, rather than requiring me to compose from base components. Your references however, is a Great start! Thank you. – Tropic

Answer 4

Look at react-sigma, which is quite powerful and fast network graph rendering engine. It supports WebGL and Canvas, allows customizing node and edge shapes, have plugins for running animations like ForceAtlas2, Filter. Also it can be extended with custom components.

Simple use case

let graph = {
    nodes:[{id:"n1", label:"Alice"}, {id:"n2", label:"Rabbit"}], 
    edges:[{id:"e1",source:"n1",target:"n2",label:"SEES"}]}
<Sigma graph={graph}
        onOverNode={e => console.log("Mouse over node: " + e.data.node.label)}>
    <RandomizeNodePositions />
</Sigma>

Loading from external file and running ForceAtlas2:

<Sigma style={{width:"200px", height:"200px"}}>
  <LoadJSON path="/public/data.json">
     <ForceAtlas2 worker barnesHutOptimize barnesHutTheta={0.6} linLogMode>
  </LoadJSON>
</Sigma>

Extending with your own component:

class MyCustomSigma extends React.Component {
    constructor(props) {
        super(props)
        props.sigma.graph.nodes().forEach(n => { n.label = "ID:" + n.id });
    };
    render = () => null;
}
...
return  <Sigma>
    <MyCustomSigma>
</Sigma>

Hearttoheart