react-kgraph

A graph lib that uses SVG and webcola to render.

Installation

npm install --save react-kgraph d3@^5.15.0 d3-hierarchy@^1.1.9

API

There is only one component exported by this lib: Graph This component takes this props:

• nodes which is an array of nodes
• links which is an array of links
• type the type of graph to render (either tree or graph)
• onNodeClick the function to call when a node is clicked
• onLinkClick the function to call when a link is clicked

node

A node as this fields

field	required	description
id	✔	the node id, it has to be uniq!
group	✖	the group, this is used for default colors only
label	✖	the label to print in the node
color	✖	color to set in the node background, overrides the default colors
children	✖ (graph) / ✔ (tree)	only needed for tree layout, all children nodes
Component	✖	the custom React component to use to render this node in particular
...	✖	all you other data

link

field	required	description
source	✔	the index of the node that is the source of this link
target	✔	the index of the node that is the target of this link
label	✖	the label to print on the link
Component	✖	the custom React component to use to render this link in particular

Simple example

import React from 'react'
import Graph from 'react-kgraph'

const nodes = [
  {
    id: 'jack',
    label: 'Jack',
  },
  {
    id: 'john',
    label: 'Jhon',
    color: '#4f9ceb',
  },
  {
    id: 'meridith',
    label: 'Meridith',
    color: 'green',
  },
]

const links = [
  {
    source: 0,
    target: 1,
    label: '200€',
  },
  {
    source: 1,
    target: 2,
    label: '100€',
  },
  {
    source: 1,
    target: 0,
    label: '150€',
  },
]

const Example = () => (
  <div>
    <div>Money flow</div>
    <Graph type="graph" nodes={nodes} links={links} />
  </div>
)

export default Example