Package Exports

react-skill-graph
react-skill-graph/dist/index.esm.js
react-skill-graph/dist/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-skill-graph) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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!