React-kgraph NPM

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