react-directed-graph-visualizer

简介

基于 D3.js 的 React 有向图可视化组件，支持节点高亮、键盘导航、主题自定义，适用于交互式数据可视化场景。

功能特性

• 支持节点/边高亮、出入边模式
• 键盘 Shift/Control 辅助高亮出入边
• 支持自定义主题和样式
• 支持节点拖拽、缩放、平移
• 适合大规模有向图的交互分析

快速上手

安装

推荐使用 pnpm 安装

pnpm i react-directed-graph-visualizer -S

使用示例

import { DirectedGraphVisualizer } from 'react-directed-graph-visualizer';

const nodes = [
  { id: '1', label: '节点1' },
  { id: '2', label: '节点2' },
];
const edges = [{ source: '1', target: '2' }];

export default () => (
  <DirectedGraphVisualizer
    nodes={nodes}
    edges={edges}
    width={800}
    height={600}
    onSelectNode={(id) => console.log('选中节点', id)}
  />
);

API

| 属性 | 说明 | 类型 | 默认值 | 版本 | | --------------------- | --------------- | ---------------------- | ------ | ----- | | nodes | 节点数据 | Node[] | 必填 | - | | edges | 边数据 | Edge[] | 必填 | - | | selectedNodeId | 当前高亮节点 id | string | - | - | | defaultSelectedNodeId | 默认高亮节点 id | string | - | - | | onSelectNode | 节点点击回调 | (id: string) => void | - | - | | width | 画布宽度 | number | 800 | - | | height | 画布高度 | number | 600 | - | | filterOrphan | 过滤孤立节点 | boolean | false | 1.1.0 | | graphSettings | 主题与样式配置 | GraphSettings | 见下表 | - |

GraphSettings 可配置项

| 属性 | 说明 | 类型 | 默认值 | | ------------- | ------------ | ------ | -------------- | | bg | 背景色 | string | white | | focusColor | 选中节点色 | string | orange | | nodeColor | 普通节点色 | string | mediumseagreen | | linkColor | 普通边色 | string | slategray | | grayColor | 非高亮色 | string | lightgray | | hoverColor | 悬浮高亮色 | string | crimson | | fontSize | 字体大小 | number | 16 | | hoverFontSize | 悬浮字体大小 | number | 24 | | graphOutColor | 出边高亮色 | string | royalblue | | graphInColor | 入边高亮色 | string | goldenrod |

迭代记录

详情：CHANGELOG

License

Copyright © 2025 - present Wxh16144.
This project is MIT licensed.