React Skill Graph

一个基于 D3.js 的交互式技能关系图谱 React 组件。 An interactive skill relationship graph React component based on D3.js.

特性 Features

• 🎨 美观的力导向图布局 Beautiful force-directed graph layout
• 🔄 流畅的交互动画 Smooth interaction animations
• 🎯 节点拖拽与缩放 Node dragging and zooming
• 🌓 支持亮色/暗色主题 Light/Dark theme support
• 📱 响应式设计 Responsive design
• 💪 TypeScript 支持 TypeScript support

安装 Installation

# Using npm
npm install react-skill-graph d3

# Using yarn
yarn add react-skill-graph d3

使用方法 Usage

import { SkillsGraph } from 'react-skill-graph';

// 定义技能组 Define skill groups
const groups = {
  CENTER: { name: '核心', color: '#ef4444' },
  WEB: { name: '前端', color: '#38bdf8' },
  SERVER: { name: '后端', color: '#4ade80' }
};

// 定义技能数据 Define skill data
const data = {
  nodes: [
    { id: 'core', name: '核心技能', group: 'CENTER' },
    { id: 'react', name: 'React', group: 'WEB' },
    { id: 'nodejs', name: 'Node.js', group: 'SERVER' }
  ],
  links: [
    { source: 'core', target: 'react', value: 5 },
    { source: 'core', target: 'nodejs', value: 4 },
    { source: 'react', target: 'nodejs', value: 3 }
  ]
};

// 使用组件 Use the component
function App() {
  return (
    <SkillsGraph 
      data={data}
      groups={groups}
      title="我的技能图谱"
      description="技术栈关系可视化"
    />
  );
}

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | data | GraphData | Yes | 图谱节点和连接数据 Graph nodes and links data | | groups | Record<string, GroupInfo> | Yes | 技能分组定义 Skill group definitions | | title | string | No | 图谱标题 Graph title | | description | string | No | 图谱描述 Graph description | | className | string | No | 容器类名 Container class name | | titleClassName | string | No | 标题类名 Title class name | | descriptionClassName | string | No | 描述类名 Description class name | | graphContainerClassName | string | No | 图谱容器类名 Graph container class name |

数据类型 Data Types

interface Node {
  id: string;
  name: string;
  group: string;
}

interface Link {
  source: string;
  target: string;
  value: number; // 1-5, indicating relationship strength
}

interface GraphData {
  nodes: Node[];
  links: Link[];
}

interface GroupInfo {
  name: string;
  color: string;
}

开发 Development

# 安装依赖 Install dependencies
npm install

# 运行开发服务器 Run development server
npm run dev

# 构建 Build
npm run build

# 运行测试 Run tests
npm run test

许可证 License

MIT

贡献 Contributing

欢迎提交 Issue 和 Pull Request！ Issues and Pull Requests are welcome!