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

automaticRearrangeAfterDropNode (boolean = false) 🚅🚅🚅 when true performing a node drag and drop should automatically rearrange all nodes positions based on new position of dragged node (note: staticGraph should be false).

height (number = 400) the height of the (svg) area where the graph will be rendered.

nodeHighlightBehavior (boolean = false) 🚅🚅🚅 when user mouse hovers a node that node and adjacent common connections will be highlighted (depending on the highlightDegree value). All the remaining nodes and links assume opacity value equal to highlightOpacity .

linkHighlightBehavior (boolean = false) 🚅🚅🚅 when the user mouse hovers some link that link and the correspondent nodes will be highlighted, this is a similar behavior to nodeHighlightBehavior but for links (just for historical reference this property was introduced in v1.0.0 ) .

highlightDegree (number = 1) Possible values: 0, 1 or 2 . This value represents the range of the highlight behavior when some node is highlighted. If the value is set to 0 only the selected node will be highlighted. If the value is set to 1 the selected node and his 1st degree connections will be highlighted. If the value is set to 2 the selected node will be highlighted as well as the 1st and 2nd common degree connections.

highlightOpacity (number = 1) this value is used to highlight nodes in the network. The lower the value the more the less highlighted nodes will be visible (related to nodeHighlightBehavior ).

maxZoom (number = 8) max zoom that can be performed against the graph.

minZoom (number = 0.1) min zoom that can be performed against the graph.

panAndZoom (boolean = false) 🚅🚅🚅 pan and zoom effect when performing zoom in the graph, a similar functionality may be consulted here .

staticGraph (boolean = false) when setting this value to true the graph will be completely static, thus all forces and drag events upon nodes will produce not effect. Note that, if this value is true the nodes will be rendered with the initial provided x and y coordinates (links positions will be automatically set from the given nodes positions by rd3g), no coordinates will be calculated by rd3g or subjacent d3 modules.

width (number = 800) the width of the (svg) area where the graph will be rendered.

node (Object) node object is explained in next section. ⬇️

Node level configurations

Name	Description
node.color string (default '#d3d3d3')	🔍🔍🔍 this is the color that will be applied to the node if no color property is found inside the node itself (yes you can pass a property 'color' inside the node and that color will override the this default one ).
node.fontColor string (default 'black')	🔍🔍🔍 fill color for node's svg label.
node.fontSize number (default 10)	font-size property for all nodes' labels.
node.fontWeight string (default 'normal')	font-weight property for all nodes' labels.
node.highlightColor string (default 'SAME')	color for all highlighted nodes (use string 'SAME' if you want the node to keep its color in highlighted state).
node.highlightFontSize number (default 8)	fontSize in highlighted state.
node.highlightFontWeight string (default 'normal')	fontWeight in highlighted state.
node.highlightStrokeColor string (default 'SAME')	strokeColor in highlighted state.
node.highlightStrokeWidth number (default 1.5)	strokeWidth in highlighted state.
node.labelProperty string (default 'id')	this is the node property that will be used in runtime to fetch the label content. You just need to add some property (e.g. firstName) to the node payload and then set node.labelProperty to be 'firstName' .
node.mouseCursor string (default 'pointer')	cursor property for when some node is mouse hovered.
node.opacity number (default 1)	by default all nodes will have this opacity value.
node.renderLabel boolean (default true)	when set to false no labels will appear along side nodes in the graph.
node.size number (default 200)	🔍🔍🔍 defines the size of all nodes.
node.strokeColor string (default 'none')	color for the stroke of each node.
node.strokeWidth number (default 1.5)	the width of the all node strokes.
node.svg string (default '')	🔍🔍🔍 render custom svg for nodes in alternative to node.symbolType . This svg can be provided as a string to either a remote svg resource or for a local one.
node.symbolType string (default 'circle')	🔍🔍🔍 the shape of the node. Use the following values under a property type inside each node (nodes may have different types, same as colors): 'circle' 'cross' 'diamond' 'square' 'star' 'triangle' 'wye' [note] react-d3-graph will map this values to d3 symbols

link (Object) link object is explained in the next section. ⬇️

Link level configurations

Name	Description
link.color string (default '#d3d3d3')	🚅🚅🚅 the color for links (from version 1.3.0 this property can be configured at link level).
link.opacity number (default 1)	the default opacity value for links.
link.semanticStrokeWidth boolean (default false)	when set to true all links will have "semantic width" , this means that the width of the connections will be proportional to the value of each link. This is how link strokeWidth will be calculated: strokeWidth += (linkValue * strokeWidth) / 10;
link.strokeWidth number (default 1.5)	strokeWidth for all links. By default the actual value is obtain by the following expression: link.strokeWidth * (1 / transform); // transform is a zoom delta Δ value
link.highlightColor string (default '#d3d3d3')	links' color in highlight state.

// 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
    fontColor='black'
    fontWeight='normal'
    dx=90
    label='label text'
    opacity=1
    renderLabel=true
    size=200
    stroke='none'
    strokeWidth=1.5
    svg='assets/my-svg.svg'
    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.