Anime Relationship Graph
Relevant source files
The following files were used as context for generating this wiki page:
The Anime Relationship Graph provides a visual representation of the connections between anime titles, characters, and voice actors (CVs). It uses a force-directed graph to show how different entries in the database relate to one another through character appearances and sequel links. Users access this feature to explore the "Anime - Character - Voice Actor" ecosystem within the project.
Sources: README.md:20-24, blog/2025/12/14/01_博客更新日志和计划.md:58-60
System Architecture
The system consists of a page-level container and two primary functional components. The AnimeGraphPage manages the global state and synchronizes it with the browser URL. The AnimeForceGraph component handles data processing and Canvas-based rendering, while the AnimeGraphController provides the user interface for filtering and physics adjustments.
Component Relationship
The following diagram illustrates the hierarchy and communication between the graph components.
The graph page serves as a state manager, ensuring that view settings like physics and filters persist through URL parameters.
Sources: src/pages/anime/graph.tsx:8-135, src/components/anime/AnimeGraphPage/index.tsx:75-125
Data Model and Graph Structure
The graph operates on two primary data structures: GraphNode and GraphLink. Nodes represent entities (Anime, Character, or Actor), while links define the relationships between them.
Node and Link Types
| Type | Category | Description |
|---|---|---|
| Anime | Node | Represents a specific anime series or movie. |
| Character | Node | Represents a character within an anime. |
| Actor | Node | Represents a voice actor (CV) who voices a character. |
| Include | Link | Connects an Anime node to a Character node. |
| VoicedBy | Link | Connects a Character node to an Actor node. |
| Sequel | Link | Connects two Anime nodes based on series progression. |
Sources: src/components/anime/AnimeGraphPage/index.tsx:11-30
Relationship Schema
The following diagram represents the logical connections between nodes in the graph data.
Characters act as the bridge between anime titles and their voice actors, while sequel relationships link anime entries directly.
Sources: src/components/anime/AnimeGraphPage/index.tsx:280-345, blog/2025/12/14/01_博客更新日志和计划.md:46-52
Core Features and Configuration
The graph supports extensive customization through a side controller panel. Users can focus on specific anime, toggle visibility of character roles, and adjust the D3 physics engine.
Controller Parameters
| Parameter | Default | Description |
|---|---|---|
id | undefined | Focusses the graph on a specific Anime ID and its immediate relations. |
hide | 配角,客串,闲角,旁白 | Filters out character nodes based on their relationship role. |
cn | true | Toggles between Chinese and Original titles for node labels. |
img | true | Toggles the rendering of character and anime images inside nodes. |
charge | -180 | Adjusts the repulsion force between nodes (D3 charge strength). |
dist | 100 | Adjusts the target distance between linked nodes. |
Sources: src/pages/anime/graph.tsx:21-55, src/components/anime/AnimeGraphPage/index.tsx:75-90
Implementation Details
State Persistence
The system uses the useEffect hook to synchronize the component state with the browser's URLSearchParams. This allows users to share specific graph views by copying the URL.
// src/pages/anime/graph.tsx:63-86
useEffect(() => {
const params = new URLSearchParams();
if (targetAnimeId !== undefined) params.set('id', String(targetAnimeId));
if (hiddenRelations.length > 0) params.set('hide', hiddenRelations.join(','));
params.set('cn', String(preferCn));
params.set('img', String(showImages));
params.set('charge', String(chargeStrength));
params.set('dist', String(linkDistance));
const newSearch = params.toString();
if (location.search !== `?${newSearch}`) {
history.replace({
pathname: location.pathname,
search: newSearch,
hash: location.hash
});
}
}, [targetAnimeId, hiddenRelations, preferCn, showImages, chargeStrength, linkDistance]);
Sources: src/pages/anime/graph.tsx:63-86
Physics and Interaction
The graph utilizes react-force-graph-2d for rendering. It implements several custom interaction handlers:
- Node Click: Centers the view on the clicked node and zooms in.
- Right Click: Opens a context menu providing links to detail pages.
- Middle Click: Toggles the "pinned" state of a node to fix its position.
- Highlighting: Hovering over a node highlights its neighbors and the links connecting them.
Sources: src/components/anime/AnimeGraphPage/index.tsx:360-410, src/components/anime/AnimeGraphPage/index.tsx:490-530
Rendering Logic
Nodes are rendered onto a 2D Canvas. If showImages is enabled, the system fetches images from a CDN and clips them into the node boundaries. Labels are drawn below nodes with a semi-transparent background for readability.
Sources: src/components/anime/AnimeGraphPage/index.tsx:420-475, src/components/anime/AnimeCard/index.tsx:35-40
Conclusion
The Anime Relationship Graph integrates data from the anime store to create an interactive exploration tool. By mapping characters to voice actors and linking anime series, the graph provides a macro view of the project's anime database. The synchronization with URL parameters and physics controls allows for both high-level exploration and specific, shareable insights into character-actor relationships.
Sources: src/pages/anime/graph.tsx:130-145, src/components/anime/AnimeGraphPage/index.tsx:270-300