react-directed-graph-visualizer

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.