One Piece Visualizer

海贼王人物关系图谱，用 React、TypeScript 和 D3 展示 150 个核心角色、636 条人物关系，并支持搜索、筛选、时间线切片和角色侧栏详情。

功能特性

• 力导向关系图：基于 D3 force simulation 渲染角色节点和关系边。
• 150 人本地数据集：角色数据存放在 data/characters/*.json，关系数据存放在 data/relations.json。
• 本地头像资源：角色头像位于 public/avatars/*.webp，页面不依赖远程图片 CDN。
• 搜索和筛选：支持按关键词、势力、赏金、恶魔果实、关系类型筛选。
• 剧情时间线：支持按篇章切片显示当前可见角色与关系。
• 角色详情侧栏：展示赏金、势力、果实、状态、简介与当前可见关系。
• 数据管线：通过脚本校验 schema、构建生成数据索引、审计数据质量。
• 性能优化：全量图自动进入 dense 模式，降低关系标签、SVG 滤镜和 D3 tick 带来的卡顿。

技术栈

• React 19
• TypeScript
• Vite
• Tailwind CSS 4
• D3.js v7
• Motion
• Lucide React

项目结构

data/
  characters/          # 一人一份角色 JSON
  relations.json       # 人物关系边
  factions.json        # 势力元数据
  arcs.json            # 篇章顺序
public/
  avatars/             # 本地 webp 头像
scripts/               # 数据构建、校验、爬取、审计脚本
src/
  components/          # UI 组件
  data/index.ts        # 由 build:data 自动生成
  lib/                 # 过滤、关系、性能策略、Codex API 相关逻辑

快速开始

npm install
npm run dev

开发服务器默认运行在：

http://127.0.0.1:3000/

常用命令

npm run dev           # 启动开发服务器
npm run build         # 生产构建
npm run lint          # TypeScript 类型检查
npm run validate      # 校验 data/**/*.json schema 与引用
npm run build:data    # 从 data/**/*.json 生成 src/data/index.ts
npm run audit:data    # 数据质量审计
npm run check:budget  # 构建产物体积预算检查

数据维护约定

• 不要手动修改 src/data/index.ts，它由 npm run build:data 自动生成。
• 修改角色、关系、势力或篇章时，优先修改 data/**/*.json。
• 改完数据后运行：

npm run build:data
npm run validate
npm run lint

• 头像必须本地化到 public/avatars/{id}.webp。
• .env.local 用于本地 API key，不应提交到仓库。

当前数据规模

• 角色：150
• 关系：636
• 本地头像：150+
• 支持篇章：东海篇到艾尔巴夫

构建验证

当前项目已通过：

npm run lint
npm run validate
npx tsx --test scripts/*.test.ts
npm run build
npm run check:budget

说明

本项目是粉丝向数据可视化实验，角色、世界观和相关设定版权归原作品权利方所有。本仓库仅用于学习、研究和可视化展示。

License

项目代码以 MIT License 开源。角色、头像、世界观与相关设定版权归原作品权利方所有，不包含在代码开源授权范围内。