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