Simple Node-Edge Graph Library

A lightweight React + D3.js component for rendering interactive node-edge (force‐directed) graphs.
Supports drag, click tooltips (via MUI Popover), dynamic data updates, custom styling, and fully tested.

Features

• Force-directed layout powered by D3.js
• Customizable nodes & edges with arbitrary properties and color, arrow‐heads
• Labels rendered alongside nodes and edges
• Drag & drop nodes to reposition (with smooth simulation)
• Click interactions (tooltips/popovers) on nodes or link labels
• Responsive — auto‐centers based on container size; supports fluid % or fixed px
• Test coverage with Vitest + Testing Library (including jsdom stubs for SVG)

Installation

# Yarn
yarn add simple-node-edge-graph-lib

# npm
npm install simple-node-edge-graph-lib

If you want the default styles:

import 'simple-node-edge-graph-lib/simple-node-edge-graph-lib.css'

Or, enable automatic CSS injection by bundling your app with Vite/Webpack that respects the style field.

Quick Start

import React from 'react'
import ReactDOM from 'react-dom/client'
import SimpleNodeEdgeGraph from 'simple-node-edge-graph-lib'
import 'simple-node-edge-graph-lib/simple-node-edge-graph-lib.css'

const data = {
  nodes: [
    { name: 'A', properties: { foo: 'bar' }, color: '#4caf50' },
    { name: 'B', properties: { foo: 'baz' }, color: '#f44336' }
  ],
  edges: [
    { source: 'A', target: 'B', properties: { label: 'A→B' }, value: 1, arrow: ['target'] }
  ]
}

const App = () => (
  <div style={{ width: '800px', height: '600px' }}>
    <SimpleNodeEdgeGraph
      width="100%"
      height="100%"
      graph={data}
    />
  </div>
)

ReactDOM.createRoot(document.getElementById('root')!).render(<App />)

Component API

<SimpleNodeEdgeGraph />

Prop	Type	Required	Description
graph	{ nodes: Node[]; edges: Edge[] }	Yes	Graph data (see types below).
width	string (e.g. "100%" or "800px")	Yes	SVG container width.
height	string	Yes	SVG container height.

Node

interface Node {
  name: string;
  properties: Record<string, string>;
  color: string;       // e.g. "#2196f3"
}

Edge

interface Edge {
  source: string;      // node.name of source
  target: string;      // node.name of target
  properties: Record<string, string>;
  value: number;       // used for stroke width
  arrow: Array<'source' | 'target'>; // where to draw arrowheads
}

Styling

Default CSS (copied into dist/simple-node-edge-graph-lib.css) provides basic styling for:

• .node (circle)
• .link (line)
• .node-group (g wrapper for circle+label)
• .label, .link-label (text)

You can override any rules in your own stylesheet.

Development

# install deps
npm install

# run demo app
npm run dev

# build library
npm run build