{"library":"react-d3-graph","title":"React D3 Graph","description":"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-d3-graph"],"cli":null},"imports":["import { Graph } from 'react-d3-graph';","import { type GraphData } from 'react-d3-graph';","import { type GraphConfiguration } from 'react-d3-graph';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport { Graph } from 'react-d3-graph';\n\nconst initialData = {\n  nodes: [\n    { id: 'Node A', color: '#ff0000' },\n    { id: 'Node B', symbolType: 'square' },\n    { id: 'Node C' }\n  ],\n  links: [\n    { source: 'Node A', target: 'Node B', color: '#0000ff' },\n    { source: 'Node B', target: 'Node C' }\n  ]\n};\n\nconst config = {\n  nodeHighlightBehavior: true,\n  linkHighlightBehavior: true,\n  height: 400,\n  width: 600,\n  staticGraph: false,\n  d3: {\n    gravity: -200\n  },\n  node: {\n    color: '#d3d3d3',\n    size: 200,\n    highlightStrokeColor: 'blue',\n    labelProperty: 'id'\n  },\n  link: {\n    highlightColor: 'lightblue',\n    markerHeight: 6,\n    markerWidth: 6\n  }\n};\n\nconst MyGraphComponent: React.FC = () => {\n  const [data, setData] = useState(initialData);\n\n  const onClickNode = function(nodeId: string) {\n    window.alert(`Clicked node ${nodeId}`);\n  };\n\n  const onClickLink = function(source: string, target: string) {\n    window.alert(`Clicked link between ${source} and ${target}`);\n  };\n\n  return (\n    <div style={{ border: '1px solid #ccc', padding: '10px' }}>\n      <h2>Basic React D3 Graph</h2>\n      <Graph\n        id=\"graph-id\"\n        data={data}\n        config={config}\n        onClickNode={onClickNode}\n        onClickLink={onClickLink}\n      />\n    </div>\n  );\n};\n\nexport default MyGraphComponent;\n","lang":"typescript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}