Package Exports

react-directed-graph-visualizer
react-directed-graph-visualizer/es/index.js
react-directed-graph-visualizer/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-directed-graph-visualizer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

react-directed-graph-visualizer

Package Exports

Readme

react-directed-graph-visualizer

简介

功能特性

快速上手

安装

使用示例

API

GraphSettings 可配置项

迭代记录

License