Note about performance
Some of the properties have a major performance impact when toggled while rendering graphs of medium or large dimensions (hundreds or thousand of elements). These properties are marked with 🚅🚅🚅.
⭐ tip to achieve smoother interactions you may want to provide a toggle to set staticGraph to true

Note about granularity
Some of the properties listed in the Node section are marked with 🔍🔍🔍. This means that this properties have a higher level of granularity. These properties can be defined in the graph payload at a node level. (sample payload below)

const graph = {
    nodes: [
        {
            id: 'id',
            color: 'red',         // only this node will be red
            size: 300,            // only this node will have size 300
            symbolType: 'diamond' // only this node will have 'diamond' shape
        }
    ],
    links: [...]
};

Graph global configurations

strokeWidth += (linkValue * strokeWidth) / 10;

link.strokeWidth * (1 / transform); // transform is a zoom delta Δ value

// A simple config that uses some properties
const myConfig = {
    nodeHighlightBehavior: true,
    node: {
        color: 'lightgreen',
        size: 120,
        highlightStrokeColor: 'blue'
    },
    link: {
        highlightColor: 'lightblue'
    }
};

// Sorry for the long config description, here's a potato 🥔.

Offers a series of methods that isolate logic of Graph component and also from Graph rendering methods.

 // links example
 {
    "Androsynth": {
        "Chenjesu": 1,
        "Ilwrath": 1,
        "Mycon": 1,
        "Spathi": 1,
        "Umgah": 1,
        "VUX": 1,
        "Guardian": 1
    },
    "Chenjesu": {
        "Androsynth": 1,
        "Mycon": 1,
        "Spathi": 1,
        "Umgah": 1,
        "VUX": 1,
        "Broodhmome": 1
    },
    ...
 }

Some methods that help no the process of rendering a node.

Graph component is the main component for react-d3-graph components, its interface allows its user to build the graph once the user provides the data, configuration (optional) and callback interactions (also optional). The code for the live example can be consulted here

Extends React.Component

import { Graph } from 'react-d3-graph';

// graph payload (with minimalist structure)
const data = {
    nodes: [
      {id: 'Harry'},
      {id: 'Sally'},
      {id: 'Alice'}
    ],
    links: [
        {source: 'Harry', target: 'Sally'},
        {source: 'Harry', target: 'Alice'},
    ]
};

// the graph configuration, you only need to pass down properties
// that you want to override, otherwise default ones will be used
const myConfig = {
    nodeHighlightBehavior: true,
    node: {
        color: 'lightgreen',
        size: 120,
        highlightStrokeColor: 'blue'
    },
    link: {
        highlightColor: 'lightblue'
    }
};

// graph event callbacks
const onClickNode = function(nodeId) {
     window.alert('Clicked node ${nodeId}');
};

const onMouseOverNode = function(nodeId) {
     window.alert(`Mouse over node ${nodeId}`);
};

const onMouseOutNode = function(nodeId) {
     window.alert(`Mouse out node ${nodeId}`);
};

const onClickLink = function(source, target) {
     window.alert(`Clicked link between ${source} and ${target}`);
};

const onMouseOverLink = function(source, target) {
     window.alert(`Mouse over in link between ${source} and ${target}`);
};

const onMouseOutLink = function(source, target) {
     window.alert(`Mouse out link between ${source} and ${target}`);
};

<Graph
     id='graph-id' // id is mandatory, if no id is defined rd3g will throw an error
     data={data}
     config={myConfig}
     onClickNode={onClickNode}
     onClickLink={onClickLink}
     onMouseOverNode={onMouseOverNode}
     onMouseOutNode={onMouseOutNode}
     onMouseOverLink={onMouseOverLink}
     onMouseOutLink={onMouseOutLink}/>

Offers a series of methods that isolate render logic for Graph component.

Node component is responsible for encapsulating node render.

Extends React.Component

const onClickNode = function(nodeId) {
     window.alert('Clicked node', nodeId);
};

const onMouseOverNode = function(nodeId) {
     window.alert('Mouse over node', nodeId);
};

const onMouseOutNode = function(nodeId) {
     window.alert('Mouse out node', nodeId);
};

<Node
    id='nodeId'
    cx=22
    cy=22
    fill='green'
    fontSize=10
    dx=90
    fontWeight='normal'
    label='label text'
    opacity=1
    renderLabel=true
    size=200
    stroke='none'
    strokeWidth=1.5
    type='square'
    className='node'
    onClickNode={onClickNode}
    onMouseOverNode={onMouseOverNode}
    onMouseOutNode={onMouseOutNode} />

Link component is responsible for encapsulating link render.

Extends React.Component

const onClickLink = function(source, target) {
     window.alert(`Clicked link between ${source} and ${target}`);
};

const onMouseOverLink = function(source, target) {
     window.alert(`Mouse over in link between ${source} and ${target}`);
};

const onMouseOutLink = function(source, target) {
     window.alert(`Mouse out link between ${source} and ${target}`);
};

<Link
    source='idSourceNode'
    target='idTargetNode'
    x1=22
    y1=22
    x2=22
    y2=22
    strokeWidth=1.5
    stroke='green'
    className='link'
    opacity=1
    onClickLink={onClickLink}
    onMouseOverLink={onMouseOverLink}
    onMouseOutLink={onMouseOutLink} />

Offers a series of generic methods for object manipulation, and other operations that are common across rd3g such as error logging.

Create new object from the inputted one only with the props passed in the props list.