Registry / data / react-d3-graph

react-d3-graph

library2.6.0jsnpmunverified

React D3 Graph (react-d3-graph) is a React component library designed to facilitate the creation of interactive and configurable graph and network visualizations using D3.js. The current stable version is 2.6.0. The library maintains an active release cadence, with frequent updates addressing bugs and introducing enhancements, as evidenced by multiple releases in recent history. Its key differentiators include ease of use for complex graph structures, extensive configuration options for nodes and links, and the ability to render highly customizable nodes through a `node.viewGenerator` feature, allowing for diverse visual representations beyond basic shapes. It also leverages D3's powerful force-directed layout algorithms to provide dynamic and responsive graph interactions.

data web-framework

npm install react-d3-graph

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-D3-GRAPH

react-d3-graph

datajavascriptv2.6.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Graph

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

✗ const Graph = require('react-d3-graph');

The primary component for rendering a graph. Named import is standard for ESM.

GraphData

✓ import { type GraphData } from 'react-d3-graph';

Type definition for the graph data structure (nodes and links) when using TypeScript. Available since v2.4.1 via DefinitelyTyped.

GraphConfiguration

✓ import { type GraphConfiguration } from 'react-d3-graph';

Type definition for the graph configuration object when using TypeScript. Available since v2.4.1 via DefinitelyTyped.

This quickstart renders a basic interactive graph with three nodes and two links, demonstrating custom node colors, shapes, and link highlighting. It includes click handlers for nodes and links, and basic graph configuration for layout and appearance.

import React, { useState } from 'react'; import { Graph } from 'react-d3-graph'; const initialData = { nodes: [ { id: 'Node A', color: '#ff0000' }, { id: 'Node B', symbolType: 'square' }, { id: 'Node C' } ], links: [ { source: 'Node A', target: 'Node B', color: '#0000ff' }, { source: 'Node B', target: 'Node C' } ] }; const config = { nodeHighlightBehavior: true, linkHighlightBehavior: true, height: 400, width: 600, staticGraph: false, d3: { gravity: -200 }, node: { color: '#d3d3d3', size: 200, highlightStrokeColor: 'blue', labelProperty: 'id' }, link: { highlightColor: 'lightblue', markerHeight: 6, markerWidth: 6 } }; const MyGraphComponent: React.FC = () => { const [data, setData] = useState(initialData); const onClickNode = function(nodeId: string) { window.alert(`Clicked node ${nodeId}`); }; const onClickLink = function(source: string, target: string) { window.alert(`Clicked link between ${source} and ${target}`); }; return ( <div style={{ border: '1px solid #ccc', padding: '10px' }}> <h2>Basic React D3 Graph</h2> <Graph id="graph-id" data={data} config={config} onClickNode={onClickNode} onClickLink={onClickLink} /> </div> ); }; export default MyGraphComponent;

Debug

Known issues

gotchaVersion 2.4.0 was released with known issues and was not up-to-date with its own changelog. Users were strongly advised to immediately upgrade to version 2.4.1 to avoid bugs and ensure correct functionality.

fix

Always use version 2.4.1 or newer. Do not install or deploy applications using `react-d3-graph@2.4.0`.

affects: =2.4.0

breakingVersion 2.0.0 introduced significant changes, including fixes for link colors, proper handling of node ID 0, and addressing issues with dynamically adding/deleting nodes from graphs with fixed positions. These changes may alter previous behaviors or require adjustments to configurations, particularly regarding how node IDs are handled and the stability of graph layouts with fixed nodes.

fix

Review the full changelog for `2.0.0` and test existing implementations thoroughly. Pay close attention to node ID assignments (especially '0'), link color configurations, and how fixed node positions are managed during data updates.

affects: >=2.0.0

deprecatedThe `node.size` property in configurations previously only accepted a single value for radius. Since version 2.5.0, `node.size` can now accept both height and width. While the old single-value usage might still work, it's considered less explicit.

fix

For nodes that require specific rectangular dimensions, update `node.size` to explicitly define both height and width if needed. For example, `{ size: { height: 50, width: 80 } }`.

affects: <2.5.0

gotchaWhen providing graph data, it is crucial to include at least one node. Attempting to render a graph with an empty `nodes` array will result in an explicit error message indicating insufficient data for rendering.

fix

Ensure that the `data.nodes` array passed to the `Graph` component is never empty. If dynamically managing data, implement checks to prevent rendering when no nodes are present.

affects: >=2.0.0

gotchaIn earlier versions, link arrow colors could go out of sync with link colors, particularly when `link.color` or `link.highlightColor` were updated. This was a visual glitch affecting the consistency of link representation.

fix

Upgrade to `react-d3-graph@2.6.0` or newer. If staying on older versions, be aware of potential inconsistencies in arrow color when programmatically changing link colors.

affects: <2.6.0

Errors

Common errors & fixes

Error: react-d3-graph :: Graph :: you have not provided enough data for react-d3-graph to render something. You need to provide at least one node

The `data` prop provided to the `Graph` component contains an empty or missing `nodes` array.

fix

Ensure that the `data.nodes` array has at least one node object defined before rendering the `Graph` component.

TypeError: Cannot read properties of undefined (reading 'x')

Often occurs when node data or link data is malformed or inconsistent, especially after dynamic updates that don't correctly preserve node positions or properties. This can happen if node IDs in links do not match existing node IDs.

fix

Verify the structure and completeness of your `data.nodes` and `data.links` objects. Ensure `id` properties are unique and consistent across nodes and links. If updating data dynamically, use `React.useState` or similar mechanisms to ensure immutability and proper reconciliation.

Links get disappeared while dragging the nodes

This was a known bug in versions around 2.0.1 where interaction with nodes could cause connected links to temporarily or permanently disappear from view.

fix

This specific bug was addressed in `react-d3-graph@2.0.1` and later versions. Upgrade your `react-d3-graph` package to the latest stable release (2.6.0 or newer) to resolve this.

Error clicking nodes composed of mdi-react icons

In versions prior to 2.1.0/2.2.0, clicking nodes with complex custom content, such as SVG icons from libraries like `mdi-react`, could trigger an internal error due to event handling or DOM traversal issues.

fix

Upgrade `react-d3-graph` to version `2.2.0` or newer. This issue was resolved through bug fixes in later releases, improving compatibility with custom node rendering using `node.viewGenerator`.

Upgrade

Version history

2.6.0latest on npm

Audit

Dependencies

d3requiredRequired peer dependency for D3.js visualization engine.

reactrequiredRequired peer dependency for the React component framework.

Agent activity

5 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/danielcaldas/react-d3-graph ↗

packagehttps://www.npmjs.com/package/react-d3-graph ↗

homepagehttps://danielcaldas.github.io/react-d3-graph/ ↗