mcpField
R
reagraph

reagraph

github.com/reaviz开发450 次安装20 周前更新
代码仓库

关于 reagraph

Reagraph 是基于 WebGL 的 React 图可视化库，使用 Three.js、React Three Fiber、D3 和 Graphology 绘制交互式节点与连线图。它提供二维、三维视图以及力导向和层级布局，适用于构建图数据界面的开发者。

主要功能

  1. 01交互式二维和三维图
  2. 02力导向及层级布局
  3. 03节点与连线样式定制
  4. 04节点大小映射中心性等属性
  5. 05选择、套索和折叠交互
  6. 06画布居中、适配与导出

适用场景

  1. 01在 React 界面展示关系网络
  2. 02通过不同布局查看图结构
  3. 03按节点属性调整可视权重
  4. 04为图视图添加选择和折叠操作

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/reaviz/skills --skill reagraph

安装后在 Claude Code 中输入/reagraph确认已加载。

详细介绍

Reagraph

Reagraph 是一款基于 WebGL 的 React 图可视化库，构建于 Three.js、React Three Fiber、D3 和 Graphology 之上。它可使用力导向和层级布局，渲染 2D 和 3D 交互式节点连线图。

安装

npm install reagraph

基本设置

import { GraphCanvas } from 'reagraph';

const nodes = [
  { id: 'n-1', label: 'Node 1' },
  { id: 'n-2', label: 'Node 2' },
  { id: 'n-3', label: 'Node 3' },
];

const edges = [
  { id: 'e-1', source: 'n-1', target: 'n-2', label: 'Edge 1' },
  { id: 'e-2', source: 'n-1', target: 'n-3', label: 'Edge 2' },
];

function App() {
  return (
    <GraphCanvas nodes={nodes} edges={edges} />
  );
}

数据结构

GraphNode
interface GraphNode {
  id: string;           // Unique ID (required)
  label?: string;       // Display label
  subLabel?: string;    // Secondary label
  size?: number;        // Node size
  fill?: string;        // Override fill color
  icon?: string;        // Icon URL
  cluster?: string;     // Cluster group ID
  parents?: string[];   // Parent node IDs (for hierarchy)
  data?: any;           // Custom metadata
  labelVisible?: boolean; // Force label visibility
  fx?: number;          // Fixed X position
  fy?: number;          // Fixed Y position
  fz?: number;          // Fixed Z position
}
GraphEdge
interface GraphEdge {
  id: string;           // Unique ID (required)
  source: string;       // Source node ID (required)
  target: string;       // Target node ID (required)
  label?: string;       // Display label
  subLabel?: string;    // Secondary label
  size?: number;        // Edge thickness
  fill?: string;        // Override fill color
  dashed?: boolean;     // Dashed line style
  dashArray?: [number, number]; // [dashSize, gapSize]
  labelVisible?: boolean; // Force label visibility
  interpolation?: 'linear' | 'curved'; // Edge shape
  arrowPlacement?: 'none' | 'mid' | 'end'; // Arrow position
  subLabelPlacement?: 'below' | 'above'; // SubLabel position
}

常见模式

  • 从统一入口导入：始终使用 import { Component } from 'reagraph'
  • 通过 Ref 访问：在 GraphCanvas 上使用 ref 调用命令式方法（centerGraph、fitNodesInView、exportCanvas）
  • 单独设置节点样式：直接在 GraphNode 对象上设置 fill、size、icon，以覆盖主题默认值
  • 单独设置边样式：直接在 GraphEdge 对象上设置 fill、dashed、interpolation
  • 3D 布局：在布局名称后添加 3d 后缀（例如 forceDirected3d、treeTd3d）
  • 尺寸策略：使用 sizingType 属性，按 pagerank、centrality 或自定义属性自动调整节点大小

组件索引

图

GraphCanvas、GraphScene

节点

Sphere、SphereWithIcon、SphereWithSvg、Svg、Badge、自定义 NodeRenderer

边

Edge、Arrow、自环、虚线、曲线、边聚合

布局

16 种布局算法：forceDirected、circular、concentric、tree、radial、hierarchical、nooverlap、forceatlas2、custom

交互

useSelection、Lasso、CameraControls、useCenterGraph、RadialMenu、useCollapse

样式

Theme（浅色/深色）、SizingType（pagerank、centrality、attribute）

评论

支持 Markdown