https://relation-graph.com/_nuxt/CFl7NZVh.js

1const e=JSON.parse('[{"groupId":"supply-chain-network","groupName":"供应链与产业链网络","groupName_en":"Supply Chain and Industry Networks","demos":["industry-chain-hierarchy-map","industrial-chain-card-anchored-mixed-layout","industry-chain-group-layout-editor","map-linked-warehouse-product-overview","trade-partner-relationship-explorer","google-income-statement-ribbon-infographic"],"desc_en":"### Supply Chain and Industry Networks\\n\\nThis category focuses on production, trade, and circulation relationships across multi-party networks.\\n\\n- Map suppliers, channels, warehouses, and partner dependencies.\\n- Present hierarchy, grouping, and map-linked operational context.\\n- Support analysis of chain structure and collaboration paths.","desc_zh":"### 供应链与产业链网络\\n\\n该分类聚焦生产、流通与协作网络中的多方关系。\\n\\n- 展示供应商、渠道、仓储与伙伴之间的依赖。\\n- 结合层级、分组与地图联动进行业务呈现。\\n- 支持产业链结构与协同路径分析。"},{"groupId":"it-topology-monitoring","groupName":"IT网络与云基础设施拓扑监控","groupName_en":"IT and Cloud Topology Monitoring","demos":["network-topology-monitor","infrastructure-topology-dashboard","canvas-slot-cloud-infrastructure-topology","system-architecture-diagram","system-architecture-diagram-editor","connected-subnetwork-layout-switcher"],"desc_en":"### IT and Cloud Topology Monitoring\\n\\nThis category targets infrastructure visibility and runtime topology inspection.\\n\\n- Visualize host, service, and network connectivity.\\n- Build monitoring-oriented dashboards and operation views.\\n- Compare subnetworks while keeping topology readability.","desc_zh":"### IT网络与云基础设施拓扑监控\\n\\n该分类面向基础设施可观测与拓扑巡检场景。\\n\\n- 可视化主机、服务与网络连接关系。\\n- 构建偏监控与运维的看板视图。\\n- 对比子网络并保持拓扑可读性。"},{"groupId":"enterprise-investment-relations","groupName":"企业股权与投融资关系分析","groupName_en":"Equity and Investment Relationship Analysis","demos":["corporate-equity-structure-diagram","investment-shareholder-relationship-explorer","trade-partner-relationship-explorer","corporate-group-relationship-map","corporate-group-relationship-tree","bidirectional-tree-layout"],"desc_en":"### Equity and Investment Relationship Analysis\\n\\nThis category is for ownership, control, and capital relationship exploration.\\n\\n- Render group structures, shareholder paths, and investment chains.\\n- Support traversal across upstream and downstream entities.\\n- Help analysts inspect multi-level corporate connections.","desc_zh":"### 企业股权与投融资关系分析\\n\\n该分类用于股权、控制关系与资本链路探查。\\n\\n- 展示集团结构、股东路径与投资链条。\\n- 支持在上下游实体间进行关系追踪。\\n- 帮助分析多层企业连接结构。"},{"groupId":"organization-people-relations","groupName":"组织架构与人员关系管理","groupName_en":"Organization and People Relationship Management","demos":["business-unit-organizational-chart","class-members-and-interest-group-relations","character-relationship-graph-filters","character-relationship-graph-operations","jin-yong-sect-map-browser","zodiac-compatibility-matcher"],"desc_en":"### Organization and People Relationship Management\\n\\nThis category focuses on structures and interactions among people and teams.\\n\\n- Present organization hierarchy and group affiliation.\\n- Support filtering, highlighting, and relationship exploration.\\n- Adapt to both business and social relationship views.","desc_zh":"### 组织架构与人员关系管理\\n\\n该分类聚焦人员、团队与组织结构关系。\\n\\n- 展示组织层级与群体归属。\\n- 支持筛选、高亮与关系探索。\\n- 适配业务组织与社交关系两类视图。"},{"groupId":"architecture-dependency-modeling","groupName":"系统架构与依赖关系建模","groupName_en":"System Architecture and Dependency Modeling","demos":["system-architecture-diagram","system-architecture-diagram-editor","database-foreign-key-diagram","enterprise-quadrant-fixed-layout","custom-mixed-subgraph-layouts","center-and-tree-layout-composition"],"desc_en":"### System Architecture and Dependency Modeling\\n\\nThis category centers on service, module, and dependency structure expression.\\n\\n- Build architecture views from static or editable canvase

1s.\\n- Model cross-layer dependencies and directional links.\\n- Combine layout strategies for complex structure clarity.","desc_zh":"### 系统架构与依赖关系建模\\n\\n该分类聚焦服务、模块与依赖结构表达。\\n\\n- 构建静态展示或可编辑的架构视图。\\n- 描述跨层级依赖与方向关系。\\n- 通过混合布局提升复杂结构可读性。"},{"groupId":"database-data-modeling","groupName":"数据库结构与数据建模","groupName_en":"Database Structure and Data Modeling","demos":["database-foreign-key-diagram","load-tree-from-hierarchical-data","connect-lines-to-node-content-targets","element-lines","compare-element-to-node-and-element-to-element-links"],"desc_en":"### Database Structure and Data Modeling\\n\\nThis category addresses schema-level structures and relation-oriented data modeling.\\n\\n- Show table, foreign-key, and hierarchical data relationships.\\n- Link graph nodes with external UI elements as data views.\\n- Validate modeling strategies from structured source data.","desc_zh":"### 数据库结构与数据建模\\n\\n该分类面向模式层结构与关系型数据建模。\\n\\n- 展示表结构、外键关系与层级数据。\\n- 支持图节点与外部元素联动表达数据关系。\\n- 验证结构化数据到图模型的落地方式。"},{"groupId":"workflow-orchestration","groupName":"业务流程与工作流编排","groupName_en":"Workflow and Process Orchestration","demos":["ai-model-workflow-graph","simulated-data-flow-path","animated-route-progress-line-slot","google-income-statement-ribbon-tutorial","google-income-statement-ribbon-infographic","metric-rollup-graph-editor"],"desc_en":"### Workflow and Process Orchestration\\n\\nThis category focuses on sequential logic, flow transitions, and process storytelling.\\n\\n- Render workflow stages and path-based progress.\\n- Express transfer, transformation, and dependency of flow nodes.\\n- Support operational interpretation through animated links.","desc_zh":"### 业务流程与工作流编排\\n\\n该分类聚焦流程节点、流转路径与过程叙事。\\n\\n- 展示工作流阶段与路径进度。\\n- 表达节点间传递、转换与依赖关系。\\n- 通过动画连线增强流程可解释性。"},{"groupId":"path-routing-analysis","groupName":"路径分析与线路规划","groupName_en":"Path Analysis and Routing","demos":["shortest-path-query","animated-shortest-path-highlighting","simulated-data-flow-path","line-following-html-div-overlay","io-tree-layout-orientation-and-link-routing","map-linked-warehouse-product-overview"],"desc_en":"### Path Analysis and Routing\\n\\nThis category is for route reasoning and path-oriented interaction.\\n\\n- Calculate and highlight shortest or key paths.\\n- Visualize line-following motion and route progression.\\n- Support decision scenarios where path choice matters.","desc_zh":"### 路径分析与线路规划\\n\\n该分类用于路径推演与线路导向交互。\\n\\n- 计算并高亮最短路径或关键路径。\\n- 展示沿线运动与路径进度。\\n- 适用于对路径选择敏感的决策场景。"},{"groupId":"geospatial-graph-applications","groupName":"地理空间联动图应用","groupName_en":"Geospatial Graph Applications","demos":["world-map-graph-overlay-snapshots","us-map-graph-overlay-snapshots","map-linked-warehouse-product-overview","connect-list-items-to-location-nodes","jin-yong-sect-map-browser","connect-targets-across-canvas-node-and-grid"],"desc_en":"### Geospatial Graph Applications\\n\\nThis category combines map context with graph relationships.\\n\\n- Overlay relationship links on geographic backgrounds.\\n- Link location entities with list, card, or panel content.\\n- Build map-driven exploration and drill-down experiences.","desc_zh":"### 地理空间联动图应用\\n\\n该分类结合地理底图与关系网络表达。\\n\\n- 在地图背景上叠加关系连线。\\n- 将地点实体与列表、卡片、面板联动。\\n- 构建地图驱动的探索与钻取体验。"},{"groupId":"multi-network-subgraph-governance","groupName":"多关系网与子图治理","groupName_en":"Multi-Network and Subgraph Governance","demos":["multi-group","multiple-disconnected-subsystem-networks","disconnected-multi-group-force-relayout","connected-subnetwork-layout-switcher","connected-component-layout-and-theme-switcher","multi-group-layout-style-editor","show-single-nodes"],"desc_en":"### Multi-Network and Subgraph Governance\\n\\nThis category is for canvase

1s containing multiple disconnected or semi-connected graphs.\\n\\n- Manage groups, components, and isolated nodes together.\\n- Switch layout and styling at subgraph granularity.\\n- Keep mixed network canvases controllable and readable.","desc_zh":"### 多关系网与子图治理\\n\\n该分类适用于同画布内多组分离或半连通关系网。\\n\\n- 统一管理分组、连通分量与孤点。\\n- 以子图粒度切换布局与样式。\\n- 保持混合网络画布可控且清晰。"},{"groupId":"graph-editor-modeling-workbench","groupName":"图编辑器与建模工作台","groupName_en":"Graph Editor and Modeling Workbench","demos":["diagram-editor-workbench","graph-editor-with-context-menu-and-local-save","gradient-line-graph-editor","pcb-component-wiring-editor","metric-rollup-graph-editor","node-resize-controls-and-styles","edit-node-text","line-endpoint-editing","interactive-line-path-editing","graph-undo-redo-history"],"desc_en":"### Graph Editor and Modeling Workbench\\n\\nThis category concentrates on editing workflows for production-like graph tools.\\n\\n- Create and modify nodes, links, labels, and paths.\\n- Provide operation aids such as undo-redo and contextual tools.\\n- Support domain-specific modeling from general graph primitives.","desc_zh":"### 图编辑器与建模工作台\\n\\n该分类聚焦生产级图编辑与建模流程。\\n\\n- 创建并编辑节点、连线、标签与路径。\\n- 提供撤销重做与上下文工具等编辑增强。\\n- 支持从通用图能力到领域建模的落地。"},{"groupId":"dynamic-data-incremental-updates","groupName":"动态图数据加载与增量更新","groupName_en":"Dynamic Data Loading and Incremental Updates","demos":["append-graph-data-in-stages","lazy-load-tree-children-on-expand","lazy-load-paginated-branch-nodes","leaf-expand-button-lazy-loading","managed-tree-branch-growth-reapply","show-all-preloaded-branch-nodes"],"desc_en":"### Dynamic Data Loading and Incremental Updates\\n\\nThis category targets graphs that evolve over time instead of loading once.\\n\\n- Append data step by step or by user interaction.\\n- Use lazy loading for branch-heavy or paginated trees.\\n- Reapply external state changes back into graph rendering.","desc_zh":"### 动态图数据加载与增量更新\\n\\n该分类面向持续变化而非一次性加载的图数据。\\n\\n- 支持分步追加与交互触发的数据加载。\\

1n- 适配分支重、分页化的懒加载树。\\n- 支持外部状态变更回灌到图渲染。"},{"groupId":"interactive-exploration-analysis","groupName":"交互探索与关系分析","groupName_en":"Interactive Exploration and Relationship Analysis","demos":["search-and-focus","shortest-path-query","node-hover-tooltip","node-line-tooltips-and-context-menu","node-line-click-highlighting","highlight-related-lines-on-node-hover","node-descendant-subtree-highlight"],"desc_en":"### Interactive Exploration and Relationship Analysis\\n\\nThis category focuses on understanding graph data through interactive operations.\\n\\n- Search, focus, and inspect graph entities quickly.\\n- Reveal local or path-based relationships with highlights.\\n- Improve explainability with contextual tooltip and menu layers.","desc_zh":"### 交互探索与关系分析\\n\\n该分类聚焦通过交互动作理解图数据。\\n\\n- 快速搜索、定位并检查图实体。\\n- 通过高亮揭示局部或路径关系。\\n- 借助提示层与菜单提升关系可解释性。"},{"groupId":"large-scale-layout-performance","groupName":"大规模布局与性能调优","groupName_en":"Large-Scale Layout and Performance Tuning","demos":["force-layout-performance-mode-stress-lab","performance-test-tree-layout","force-layout-live-parameter-tuning","force-layout-runtime-parameter-controls","force-layout-node-weight-and-line-elasticity","use-graphology-forceatlas2-layout","dagre-layout-integration-and-line-labels","smart-tree-layout"],"desc_en":"### Large-Scale Layout and Performance Tuning\\n\\nThis category addresses layout quality and runtime efficiency on complex graphs.\\n\\n- Stress-test force and tree strategies under different conditions.\\n- Tune physical and spacing parameters during runtime.\\n- Integrate external layout engines for specialized requirements.","desc_zh":"### 大规模布局与性能调优\\n\\n该分类面向复杂图下的布局质量与运行效率。\\n\\n- 在不同条件下压测 force 与 tree 策略。\\n- 运行时调节力学与间距参数。\\n- 接入外部布局引擎满足专业需求。"},{"groupId":"visual-theme-storytelling","groupName":"可视化主题与叙事呈现","groupName_en":"Visual Themes and Storytelling","demos":["node-styling-techniques","switchable-node-slot-templates","graph-css-theme-switcher","graph-canvas-theme-switcher","graph-hand-drawn-style-switcher","glowing-icon-node-tree","graph-theme-and-layout-preset-switcher","built-in-line-dash-and-animation"],"desc_en":"### Visual Themes and Storytelling\\n\\nThis category focuses on visual language, style systems, and narrative expression.\\n\\n- Switch node and line themes for distinct visual identities.\\n- Combine skinning, slot templates, and animation effects.\\n- Improve readability and engagement through visual storytelling.","desc_zh":"### 可视化主题与叙事呈现\\n\\n该分类聚焦视觉语言、风格系统与叙事表达。\\n\\n- 切换节点与线条主题形成差异化风格。\\n- 组合换肤、插槽模板与动画效果。\\n- 通过视觉叙事提升可读性与吸引力。"}]'),a=JSON.parse('[{"name":"基础自定义节点与缩略图","name_en":"Basic Custom Node and Minimap","path":"basic-custom-node-and-minimap","desc_en":"This example is a compact starter for a relation-graph viewer with provider-scoped initialization, custom node rendering, and an embedded minimap. It loads one inline `RGJsonData` payload, renders the root as an animated circular badge, maps child nodes to icon circles with labels below, and keeps node and line clicks diagnostic rather than editable.","desc_zh":"这个示例构建了一个全高度的 relation graph 查看器，用于展示一个虚构的小型公司网络。完成后的场景会在中间显示一个更大的根节点，并将其渲染为带动画的圆形徽标；周围节点则显示为更小的图标圆点，标签放在节点下方。像 `Invest` 和 `Executive` 这样的连线标签会绘制在连接路径上，同时小地图会始终显示在图视图内部。"},{"name":"节点样式实现方式","name_en":"Node Styling Techniques","path":"node-styling-techniques","de

1sc_en":"This example is a compact node-styling reference built on one static relation-graph scene. It compares per-node JSON style overrides, custom node slots, CSS-driven animation, fixed positioning, a mini view, and shared canvas utilities such as interaction-mode switching and image export.","desc_zh":"这个示例基于一个静态 relation-graph 场景，提供紧凑的节点样式参考。它对比了按节点 JSON 覆盖样式、自定义节点插槽、CSS 驱动动画、固定定位、小地图，以及交互模式切换和图片导出等共享画布工具。"},{"name":"节点插槽模板切换","name_en":"Switchable Node Slot Templates","path":"switchable-node-slot-templates","desc_en":"This example keeps one centered relation-graph dataset and switches the visible node body across several custom slot templates at runtime. It combines `RGSlotOnNode`, graph-wide `getNodes()` plus `updateNode(...)` rewrites of `node.type`, wrapper-class theming, `RGMiniView`, and a floating utility window with canvas settings and image export. The result is a compact reference for teams that need alternate node presentations without rebuilding the graph data.","desc_zh":"这个示例保持一份中心布局的 relation-graph 数据，在运行时在多个自定义插槽模板之间切换节点主体显示。它结合 `RGSlotOnNode`、全图 `getNodes()` 与 `updateNode(...)` 对 `node.type` 的批量改写、容器 class 主题、`RGMiniView`，以及包含画布设置和图片导出的悬浮工具窗。适合作为无需重建图数据即可切换节点呈现方案的参考。"},{"name":"插槽自定义节点内容与样式","name_en":"Slot-Based Node Content and Styles","path":"slot-based-node-content-and-styles","desc_en":"This example renders a left-to-right tree whose nodes are replaced with custom React slot content instead of the default node body. One static dataset mixes a carousel card, a video card, button nodes, circular badges, and glass-style labels, while a shared floating panel adds runtime canvas settings and image export.","desc_zh":"这个示例渲染一棵从左到右的树图，用自定义 React 插槽内容替换默认节点主体。单一静态数据集混合了轮播卡片、视频卡片、按钮节点、圆形徽章和玻璃风标签，并通过共享悬浮面板提供运行时画布设置与图片导出。"},{"name":"节点CSS外观与选中态","name_en":"Node CSS Skin and Checked State","path":"node-css-skin-and-checked-state","desc_en":"This example shows a small left-to-right tree that keeps relation-graph\'s built-in rectangular text nodes and refines them with graph options plus scoped SCSS. It is mainly a reference for default-node CSS skinning, readable single-line labels, restrained checked-state styling, and the shared floating settings and image-export utilities.","desc_zh":"这个示例展示一棵小型左到右树图，保留 relation-graph 内置的矩形文本节点，并通过图配置与作用域 SCSS 进行细化。它主要用于参考默认节点的 CSS 换肤、可读的单行标签、克制的选中态样式，以及共享的悬浮设置与图片导出工具。"},{"name":"力导图图标按钮节点","name_en":"Force Layout Icon Button Nodes","path":"force-layout-icon-button-nodes","desc_en":"This example shows a force-layout viewer where every node is rendered as the same layered icon button, with `node.data.icon` controlling both the Lucide glyph and the gradient skin. It also reuses the shared floating utility window for runtime canvas settings and image export while keeping the graph itself read-only.","desc_zh":"这个示例展示一个力导布局视图，所有节点都渲染为同一种分层图标按钮，由 `node.data.icon` 同时控制 Lucide 图标与渐变皮肤。它还复用共享悬浮工具窗提供运行时画布设置和图片导出，同时保持图谱本身只读。"},{"name":"发光图标节点树样式","name_en":"Glowing Icon Node Tree Style","path":"glowing-icon-node-tree","desc_en":"A static left-to-right relation-graph example that renders a dark neon tree with one reusable icon-and-label node slot. It also demonstrates CSS-based checked-state theming, a floating settings window for wheel and drag mode switching, and canvas image export.","desc_zh":"这是一个静态的左到右 relation-graph 示例，使用可复用的“图标+文字”节点插槽渲染深色霓虹树图。它还演示了基于 CSS 的选中态主题、用于切换滚轮与拖拽模式的悬浮设置窗，以及画布图片导出。"},{"name":"渐变连线图编辑器","name_en":"Gradient Line Graph Editor","path":"gradient-line-graph-editor","meta":{"vip":true},"desc_en":"This example turns a small relation-graph canvas into a lightweight editor with palette-driven node creation, contextual line creation, and endpoint-colored gradient edges. It also shows how custom line slots can coexist with selection, deleti

1on, canvas settings, and image export.","desc_zh":"这个示例把一个小型 relation-graph 画布变成轻量编辑器，支持基于调色板创建节点、上下文创建连线，以及按端点着色的渐变边。它还展示了自定义连线插槽如何与选择、删除、画布设置和图片导出共存。"},{"name":"图谱手绘风格切换","name_en":"Graph Hand-Drawn Style Switcher","path":"graph-hand-drawn-style-switcher","desc_en":"This example keeps a small centered hierarchy fixed and switches it between plain and hand-drawn presentation modes at runtime. It combines custom node-slot wrappers, selectable border and texture variants, SVG filter styling on built-in graph surfaces, graph-wide node and line updates, a minimap, and shared canvas export controls.","desc_zh":"这个示例保持一棵小型居中层级图不变，并在运行时在普通风格与手绘风格之间切换。它结合了自定义节点插槽包裹层、可选边框与纹理变体、对内置图层表面的 SVG 滤镜样式、全图节点与连线更新、小地图，以及共享画布导出控制。"},{"name":"AI模型工作流关系图","name_en":"AI Model Workflow Graph","path":"ai-model-workflow-graph","meta":{"vip":true},"desc_en":"This example renders a fixed-position AI workflow as custom parameter cards and connects individual input and output rows with synthesized fake lines. It also combines saved coordinates, a shared type-color system, minimap navigation, and click-based dependency highlighting to make a dense read-only workflow easier to inspect.","desc_zh":"这个示例构建了一个固定位置的工作流面板，它看起来更像 AI 生成流水线，而不是标准的节点图。每个节点都被渲染为深色圆角卡片，包含标题、左右两列参数以及堆叠的选项行。其中一些选项行会渲染为特殊区块，包括多行文本输入框和图片预览。"},{"name":"线条形态、锚点与自定义箭头","name_en":"Line Shapes, Junctions, and Custom Arrows","path":"line-shapes-junctions-and-custom-arrows","desc_en":"This example builds a center-layout reference graph that compares many built-in line behaviors at once, including shape, width, junction anchors, arrow visibility, text placement, and custom marker-based arrows. It keeps the graph data static, adds CSS-based label styling and a dark-theme switch, and includes helper controls for canvas interaction modes and image export.","desc_zh":"这个示例构建了一个中心布局参考图，一次性对比多种内置连线行为，包括线形、线宽、连接锚点、箭头显示、文字位置，以及基于 marker 的自定义箭头。它保持图数据静态，加入基于 CSS 的标签样式和暗色主题切换，并提供画布交互模式与图片导出的辅助控件。"},{"name":"线条形状、锚点与标签位置","name_en":"Line Shape, Junctions, and Label Placement","path":"line-shape-junctions-and-label-placement","desc_en":"This example demonstrates graph-wide control of edge shape, curved-line junction anchors, and label placement on a loaded avatar relationship map. It uses `getLines()` with `updateLine()` to restyle every rendered edge in place, while a floating helper window also exposes shared canvas settings and image export.","desc_zh":"这个示例在已加载的人像关系图上演示全图级的边形态控制、曲线连接锚点和标签位置控制。它通过 `getLines()` 配合 `updateLine()` 原地重设所有已渲染边，同时通过悬浮辅助窗提供共享画布设置和图片导出。"},{"name":"线条端点与节点间距调节","name_en":"Line Endpoint Gap Control","path":"line-endpoint-gap-control","meta":{"vip":true},"desc_en":"This example demonstrates live control of the gap between line endpoints and node borders by rewriting each rendered line\'s `junctionOffset`. It compares the effect across a centered straight-link cluster and a left-to-right curved tree while reusing a floating workbench for canvas settings and image export.","desc_zh":"这个示例通过改写每条已渲染连线的 `junctionOffset`，演示连线端点与节点边框之间间距的实时控制。它对比了居中直线簇与左到右曲线树两种场景下的效果，并复用悬浮工作台提供画布设置与图片导出。"},{"name":"多重连线间距调节","name_en":"Multi-Line Gap Control","path":"multi-line-gap-control","desc_en":"This example demonstrates live control of spacing between repeated links by binding `multiLineDistance` to React state and updating the loaded graph in place. It combines that gap control with graph-wide line-shape and label-placement toggles on a small repeated-edge tree, while reusing a floating settings panel for canvas modes and image export.","desc_zh":"这个示例将 `multiLineDistance` 绑定到 React 状态并原地更新已加载图谱，演示重复连线之间间距的实时控制。它在一棵带重复边的小树上结合了间距控制、全图线形切换与标签位置切换，并复用悬浮设置面板提供画布模式和图片导出。"},{"name":"内置线条虚线与动画","name_en":"Built-In Line Dash and Animation","path":"built-in-line-dash-and-animation","desc_en":"This example builds a 

1small left-to-right tree that compares relation-graph\'s built-in dashed and animated line presets in one static view. The line effects come directly from inline `dashType` and `animation` values, while icon-only nodes and a floating settings and export panel provide the surrounding presentation shell.","desc_zh":"本示例渲染了一个从左到右的小型树，用作 relation-graph 内置连线效果的对比面板。一条分支展示四种 `dashType` 预设加上一条普通连线，另一条分支则在默认曲线渲染器上展示四种 `animation` 预设。画面还包含纯图标圆形节点、绿色渐变画布，以及一个可拖拽、可最小化、可切换为设置面板并可用于导出图片的悬浮辅助窗口。"},{"name":"批量切换线条 CSS 样式","name_en":"Batch Switch CSS Line Styles","path":"batch-css-line-styles","desc_en":"This example keeps a small relation-graph tree fixed and batch-switches every rendered edge among six CSS class families at runtime. It combines per-line `className` metadata, SCSS overrides on built-in line layers, icon-slot nodes, shared canvas controls, and image export without replacing the native line renderer.","desc_zh":"这个示例构建了一个小型的从左到右树形查看器，主要用途是比较 relation-graph 的线条皮肤。画布中展示了圆形图标节点、绿色渐变背景，以及九条初始就带有不同 `className` 值、标签模式和曲线设置的连线。"},{"name":"线条动画预设集","name_en":"Graph Line Animation Presets","path":"graph-line-animation-presets","desc_en":"This example renders a left-to-right relation-graph tree and turns it into a gallery of twelve animated edge styles. It batch-updates each built-in line\'s className at runtime, uses SCSS to restyle the native line surfaces, and injects SVG filter definitions for the filter-backed presets.","desc_zh":"这个示例渲染一棵左到右 relation-graph 树，并将其变为 12 种动画边样式的展示集。它在运行时批量更新内置连线的 `className`，使用 SCSS 重绘原生线条表面，并注入 SVG 滤镜定义以支持基于滤镜的预设。"},{"name":"选中线条效果预设","name_en":"Checked Line Effect Presets","path":"checked-line-effects-presets","desc_en":"This example builds a small left-to-right tree that prechecks one edge and lets users switch that checked line among CSS-based style and animation presets. It keeps relation-graph\'s native line renderer, scopes the effects to `.rg-line-peel.rg-line-checked`, and wraps the demo in a floating settings and export panel.","desc_zh":"这个示例构建了一个从左到右的小型树形查看器，核心要点是对选中连线进行强调。图会加载一棵固定的图标树，立即将其中一条边标记为选中，并允许用户在一个浮动控制窗口中，在四种样式预设和四种动画预设之间切换这条已选中的边。"},{"name":"动画最短路径高亮","name_en":"Animated Shortest Path Highlighting","path":"animated-shortest-path-highlighting","desc_en":"This example shows how to compute a shortest path from the live relation-graph instance and highlight only that route with animated built-in line styles. It combines two-click endpoint selection, autoplay path playback, runtime layout switching, custom SVG markers, and dimmed context rendering in one read-only viewer.","desc_zh":"这个示例构建了一个只读的关系查看器，用于在一张紧凑图中持续强调两个节点之间的最短路径。画布使用基于图标的圆形节点、带自定义箭头标记的曲线连线，以及暗色霓虹视觉主题。用户可以点击两个节点手动计算一条路径，让示例自动回放随机路径，在 `tree` 和 `center` 布局之间切换，并修改当前活动路径使用的视觉皮肤。"},{"name":"自定义线条箭头预设","name_en":"Custom Line Arrow Presets","path":"custom-line-arrow-presets","desc_en":"This example shows how to define four custom SVG arrowhead markers and apply them through relation-graph\'s `defaultLineMarker` option. A floating control window lets users switch arrow presets and compare the same hierarchy in tree and center layouts, while shared controls add canvas settings and image export.","desc_zh":"这个示例展示如何定义 4 组自定义 SVG 箭头 marker，并通过 relation-graph 的 `defaultLineMarker` 选项应用。悬浮控制窗可切换箭头预设，并在树布局与中心布局间对比同一层级数据，同时提供共享的画布设置与图片导出。"},{"name":"图谱 CSS 主题切换","name_en":"Graph CSS Theme Switcher","path":"graph-css-theme-switcher","meta":{"vip":true},"desc_en":"This example keeps one left-to-right relation-graph tree and switches it among eight CSS skins at runtime. It combines wrapper-class theming, icon-slot nodes, a themed `RGMiniView`, and a `getNodes()` plus `updateNode(...)` pass so the minimap stays synchronized with the active accent. A shared floating panel also exposes wheel mode, drag mode, and image export utilities.","desc_zh":"这个示例保持一棵左到右 relation-graph 树不变，并在运行时切换 8 套 CSS 皮肤。它结合容器 

1class 主题、图标插槽节点、带主题样式的 `RGMiniView`，以及 `getNodes()` + `updateNode(...)` 批量更新，确保小地图与当前强调色同步。共享悬浮面板还提供滚轮模式、拖拽模式和图片导出工具。"},{"name":"图谱主题与布局预设切换","name_en":"Graph Theme and Layout Preset Switcher","path":"graph-theme-and-layout-preset-switcher","meta":{"vip":true,"entVip":true},"desc_en":"This example keeps one relation-graph dataset mounted while users switch both theme presets and layout presets from an on-canvas toolbar. It shows how to batch-update node and line classes, apply richer layout preset objects, and keep export and canvas controls in the same viewer shell.","desc_zh":"这个示例在同一份 relation-graph 数据挂载状态下，让用户通过画布内工具栏同时切换主题预设和布局预设。它展示了如何批量更新节点与连线 class、应用更丰富的布局预设对象，并将导出与画布控制保留在同一查看器壳层中。"},{"name":"内置线条渲染选项","name_en":"Built-in Line Rendering Options","path":"built-in-line-rendering-options","desc_en":"This example builds a compact center-layout graph that compares several built-in line behaviors, including junction anchors, curve styles, arrow direction, and path-following labels. It loads a small inline RGJsonData dataset, applies fixed circular node defaults, and keeps interaction limited to inspection clicks on nodes and lines.","desc_zh":"本示例构建了一个小型、全高的 relation-graph 画布，用作连线渲染选项的可视化参考。图使用居中布局、圆形节点和按颜色区分的连接，让查看者可以在一个预设场景中比较正交走线、曲线分支、箭头方向和标签位置。"},{"name":"线条插槽自定义渲染","name_en":"Custom Line Slot Rendering","path":"custom-line-slot-rendering","desc_en":"This example fully replaces relation-graph\'s default edge renderer with a custom line slot that adds a moving dot, endpoint labels, and a separate Detail action. It keeps the standard line click pipeline intact, uses relation-graph\'s generated path and text helpers, and includes shared viewer utilities for interaction settings and image export.","desc_zh":"这个示例用自定义连线插槽完全替换 relation-graph 默认边渲染，加入移动小圆点、端点标签和独立的 Detail 操作。它保留标准连线点击流程，使用 relation-graph 生成的路径与文本辅助信息，并包含共享查看器交互设置与图片导出工具。"},{"name":"带详情链接的动画线条插槽","name_en":"Animated Line Slot with Detail Link","path":"animated-line-slot-detail-link","desc_en":"This example replaces relation-graph\'s default line renderer with a custom slot that draws animated pipe-style edges, a path-following dot, and a clickable Detail action. It keeps the normal line click pipeline, uses a left-to-right tree layout, and reuses a shared panel for canvas settings and image export.","desc_zh":"这个示例在深色画布上构建了一棵从左向右展开的路由树，然后用自定义连线插槽替换默认的边渲染器。最终效果是一组加粗的、具有动画效果的管道式连线，一个沿着每条计算路径移动的洋红色圆点，以及一个可附加绿色 `Detail` 操作的白色连线标签。"},{"name":"路线进度动画线条插槽","name_en":"Animated Route Progress Line Slot","path":"animated-route-progress-line-slot","desc_en":"This example replaces relation-graph\'s default line rendering with a custom route-progress slot driven by per-line metadata such as icon, speed, weight, and completion percent. It also reveals richer metrics when a line is checked, adds a coordinated circular node slot, and reuses shared viewer utilities for canvas settings and image export.","desc_zh":"这个示例构建了一个从左到右展开的路径树，看起来更像运输或流程监控看板，而不是默认图谱。每条线都会变成一条加粗的动态路径，路径上有一个移动的小圆点、一个沿计算路径定位的交通工具 emoji，以及一张在连线被 checked 时展开的标签卡片。"},{"name":"模拟数据的流转路径","name_en":"Simulated data flow path","path":"simulated-data-flow-path","desc_en":"This example builds a prepared technical network graph where users choose two nodes, compute the shortest connection path, and replay a simulated data flow step by step along that route. It combines live-graph shortest-path lookup, custom line-slot animation, runtime layout switching, and shared canvas and export controls.","desc_zh":"这个示例构建了一个预置技术网络图，用户可选择两个节点、计算最短连接路径，并沿该路径逐步回放模拟数据流。它结合了实时图最短路径查询、自定义连线插槽动画、运行时布局切换，以及共享画布与导出控制。"},{"name":"沿线条运动的 HTML DIV 覆盖层","name_en":"Line-Following HTML DIV Overlay","path":"line-following-html-div-overlay","meta":{"vip":true},"desc_en":"This example shows how to convert a selected relation-graph edge into CSS motion-path data and attach real HTML overlays above the canvas. It highlights the chosen line, refreshes the path after clicks and node drags, and lets users switch between animated travel and fixed positions along the line.","desc_zh":"这个示例展示如何把选中的 relation-graph 连线转换为 CSS motion-path 数据，并在画布上方挂载真实 HTML 覆盖层。它会高亮所选连线，在点击和拖拽节点后刷新路径，并允许用户在线路上切换“沿线运动”与“固定位置”两种表现。"},{"name":"自定义连线文字位置","name_en":"Customize Line Text Position","path":"line-text-position","videoImage":true,"meta":{"vip":true}

1,"desc_en":"This example builds a small tree graph whose edge labels can be compared across detached-label and text-on-path modes. A floating control window drives x and y label offsets, tree-direction relayout, and default line-shape changes, making it a compact reference for line-label readability tuning.","desc_zh":"这个示例构建了一棵小型树图，可对比分离标签与路径贴合文字两种边标签模式。悬浮控制窗可调节标签 x/y 偏移、树方向重排以及默认线形切换，是一个用于连线文字可读性调优的紧凑参考。"},{"name":"曲线连线路径文字控制","name_en":"Curved Line Path Text Controls","path":"curved-line-path-text-controls","meta":{"vip":true},"desc_en":"This example renders a fixed left-to-right tree whose long relationship labels follow curved edge paths by default. A floating control window changes curve family, junction anchors, path placement, text alignment, offsets, and maximum visible text length, while shared scaffolding adds canvas settings and image export.","desc_zh":"这个示例渲染一棵固定的左到右树图，默认让较长关系标签沿曲线边路径显示。悬浮控制窗可调整曲线族、连接锚点、路径贴合位置、文本对齐、偏移和最大可见文本长

1度，并提供共享画布设置与图片导出。"},{"name":"正交折线标签控制","name_en":"Orthogonal Line Label Controls","path":"orthogonal-line-label-controls","meta":{"vip":true},"desc_en":"A compact relation-graph demo for tuning detached text labels on orthogonal tree links. It rotates the same tree through four directions, batch-updates live lines for placement and anchoring, and exposes offset, bend-distance, and corner-radius controls to compare readability.","desc_zh":"这是一个用于调优正交树连线分离标签的紧凑 relation-graph 示例。它将同一棵树旋转为四个方向，批量更新在线连线的标签位置与锚点，并提供偏移、折点距离和圆角半径控制以对比可读性。"},{"name":"可切换图案的胶带线条","name_en":"Pattern-Switchable Tape Lines","path":"pattern-switchable-tape-lines","meta":{"vip":true},"desc_en":"This example replaces standard relation-graph edges with slot-rendered ribbon paths on a fixed tree layout. It combines a root CSS fill variable, reusable SVG pattern defs, click-preserving custom line rendering, shared canvas controls, and screenshot export so the same ribbons can switch between solid and animated fills at runtime.","desc_zh":"这个示例在固定树布局中用插槽渲染的丝带路径替换标准 relation-graph 连线。它结合根级 CSS 填充变量、可复用 SVG pattern 定义、保留点击行为的自定义连线渲染、共享画布控制和截图导出，使同一组丝带可在运行时切换纯色与动画填充。"},{"name":"图案胶带线条渲染","name_en":"Patterned Tape Line Rendering","path":"patterned-tape-line-rendering","meta":{"vip":true},"desc_en":"This example replaces default relation-graph edges with filled tape-like SVG ribbons and lets the user switch those ribbons between translucent color and multiple static or animated pattern fills. It also updates existing nodes between circle and rectangle shapes at runtime, keeps line clicks wired into relation-graph, and includes shared canvas settings plus image export.","desc_zh":"这个示例用填充式胶带风 SVG 丝带替换默认 relation-graph 连线，并允许用户在半透明纯色及多种静态/动画图案填充之间切换。它还可在运行时把现有节点在圆形和矩形之间切换，保持连线点击仍接入 relation-graph，并提供共享画布设置与图片导出。"},{"name_en":"Google Income Statement Ribbon Graph Tutorial","name":"谷歌收入结构丝带图教程","path":"google-income-statement-ribbon-tutorial","desc_en":"This example is a six-stage tutorial that turns a nested Google income statement into a left-to-right relation-graph infographic. It starts with a plain tree, then adds custom node slots, amount-scaled node heights, ribbon-style line slots, and final brand annotations while keeping the graph interactive.","desc_zh":"这个示例是一个六阶段教程，把嵌套的 Google 收入结构转成左到右 relation-graph 信息图。它从普通树图开始，逐步加入自定义节点插槽、按金额缩放的节点高度、丝带风连线插槽以及最终品牌标注，同时保持图谱可交互。"},{"name":"折线标签样式与位置调节","name_en":"Orthogonal Line Label Styling","path":"orthogonal-line-label-styling","meta":{"vip":true},"desc_en":"A compact tree viewer that uses simple orthogonal lines with detached boxed labels on a gradient canvas. Users can rotate the tree, tune global line-label offsets, and reuse the same pattern for readable value badges or annotations on connectors.","desc_zh":"这是一个紧凑树图查看器，使用简洁正交连线与分离的盒状标签，背景为渐变画布。用户可旋转树方向、调整全局线标签偏移，并复用同一模式实现连接器上的数值徽章或注释。"},{"name":"树布局方向切换","name_en":"Tree Layout Orientation Switcher","path":"tree-layout-orientation-switcher","desc_en":"This example builds a static hierarchy viewer that switches one loaded tree between left-to-right and top-down presets at runtime. Its main lesson is the relayout flow that reapplies node dimensions, line shape defaults, and vertical-text styling so the same dataset stays readable in both orientations.","desc_zh":"这个示例构建了一个静态层级查看器，可在运行时将同一棵已加载树在左到右与上到下预设间切换。核心要点是重布局流程：重新应用节点尺寸、默认线形和竖排文字样式，使同一数据在两种方向下都保持可读。"},{"name":"树布局层级距离与节点距离设置","name_en":"Tree Layout Level and Node Spacing","path":"tree-layout-level-and-node-spacing","videoImage":true,"desc_en":"This example demonstrates two runtime spacing strategies for the relation-graph tree layout on the same fixed hierarchy. Users can compare slider-

1driven `treeNodeGapH` and `treeNodeGapV` updates with a comma-separated `levelGaps` input, while each change reruns layout, recenters the graph, and fits the viewport.","desc_zh":"这个示例在同一固定层级数据上演示 relation-graph 树布局的两种运行时间距策略。用户可对比滑块驱动的 `treeNodeGapH` 与 `treeNodeGapV` 更新，以及逗号分隔的 `levelGaps` 输入；每次变更都会重新布局、居中图谱并适配视口。"},{"name":"双向树线条标签调节","name_en":"Bidirectional Tree Line Label Tuning","path":"bidirectional-tree-line-label-tuning","desc_en":"This example builds a root-centered bidirectional tree with orthogonal links and runtime switching between horizontal and vertical tree presets. Its main focus is branch-specific line-label tuning, using post-layout branch detection to recolor each side and apply different label geometry controls to parent-side and child-side links.","desc_zh":"这个示例构建了一个以根节点为中心的双向树，其中一侧分支朝向根节点生长，另一侧分支则背离根节点生长。图形可以在水平和垂直树形预设之间切换，同时保持相同的数据集和相同的双侧结构。"},{"name":"双向树线条方向说明","name_en":"Bidirectional Tree Line Direction FAQ","path":"bidirectional-tree-line-direction-faq","desc_en":"This example builds a side-by-side bidirectional tree comparison that explains how upper-branch arrowheads can be visually reversed without changing the top-down data model required by the layout. It uses two provider-scoped graph instances, one shared tree configuration, and a small inline RGJsonData dataset whose right-panel variant changes only upper-line arrow settings and color.","desc_zh":"这个示例构建了一个全高对比页面，其中包含两个 relation-graph 画布，以及位于它们中间的固定说明列。两个画布都渲染同一棵以根节点为中心的双向树：一组分支向上生长并指向 `R-*` 节点，另一组分支则向下生长并指向 `a` 下方的子节点。"},{"name_en":"Tree Layout and Line Options","name":"树布局与连线参数调节","path":"tree-layout-line-options","meta":{"vip":true,"isNew":true},"desc_en":"This example turns a fixed tree dataset into a live tuning playground for relation-graph. Users can change tree direction and spacing, batch-restyle existing lines, switch canvas interaction modes, and export the current view as an image without rebuilding the data.","desc_zh":"这个示例把固定树数据集变成 relation-graph 的实时调参工作台。用户可调整树方向与间距、批量重设现有连线样式、切换画布交互模式，并在不重建数据的情况下导出当前视图为图片。"},{"name":"中心布局样式控制","name_en":"Center Layout Style Controls","path":"center-layout-style-controls","desc_en":"This example demonstrates relation-graph\'s built-in center layout on one fixed radial network and layers a floating control window above it. Users can switch node shape, line shape, and line-label placement on the live graph, while the shared overlay also exposes canvas interaction settings and image export.","desc_zh":"这个示例构建了一个全视口关系图，使用内置的 `center` 布局，并在画布上方放置了一个悬浮的白色控制窗口。图本身是一个固定的径向网络，中间有一个根节点，配有橙色节点和带标签的关系线。"},{"name":"中心布局层级间距设置","name_en":"Center Layout Spacing Controls","path":"center-layout-spacing-controls","videoImage":true,"desc_en":"This example demonstrates live spacing control for relation-graph\'s center layout on one fixed hierarchy. It compares a global distance coefficient with explicit per-level gap arrays, and wraps those controls in a draggable utility window that also exposes canvas settings and image export.","desc_zh":"这个示例构建了一个用于 `center` 布局的全视口 relation graph 演示，并在画布上方叠加了一个悬浮控制窗口。图本身是一个固定的分支层级结构，以小型青绿色圆点和青绿色连线渲染，因此布局变化会始终保持清晰可见。"},{"name":"力学布局实时参数调节","name_en":"Force Layout Live Parameter Tuning","path":"force-layout-live-parameter-tuning","videoImage":true,"desc_en":"This example builds a force-directed network from one static branching dataset and exposes live controls for node repulsion, line elasticity, and relayout duration. It is a compact reference for updating the active ForceLayout instance and rerunning the built-in solver without rebuilding the graph data.","desc_zh":"这个示例基于单一静态分支数据构建力导网络，并提供节点斥力、连线弹性和重布局时长的实时控制。它是更新当前 ForceL

1ayout 实例并重新运行内置求解器（无需重建图数据）的紧凑参考。"},{"name":"力导向布局运行时参数控制","name_en":"Force Layout Runtime Parameter Controls","path":"force-layout-runtime-parameter-controls","desc_en":"This example demonstrates a full-screen relation-graph force-layout playground with two preset datasets, six runtime force sliders, and a switch between continuous and fixed-iteration layout runs. It uses the live graph instance to reload data, mutate the active ForceLayout, and expose shared canvas settings and image export from a floating utility window.","desc_zh":"这个示例提供全屏 relation-graph 力导布局调参场，包含两组预设数据、6 个运行时力参数滑块，以及连续计算与固定迭代布局切换。它通过实时图实例重载数据、修改当前 ForceLayout，并在悬浮工具窗中暴露共享画布设置与图片导出。"},{"name":"力导向布局性能模式压测实验","name_en":"Force Layout Performance Mode Stress Lab","path":"force-layout-performance-mode-stress-lab","meta":{"vip":true,"entVip":true},"desc_en":"This example demonstrates a full-screen relation-graph force-layout stress playground that regenerates synthetic datasets from 100 to 10000 nodes and edges, keeps `performanceMode` enabled, and exposes six live force-coefficient sliders plus a continuous-versus-fixed layout switch. It also keeps a custom avatar-style node slot, a draggable utility window, a minimap, and shared canvas settings active so teams can evaluate richer rendering behavior under heavier force-directed loads.","desc_zh":"这个示例展示全屏 relation-graph 力导布局压测场，可从 100 到 10000 节点/边生成合成数据，保持 `performanceMode` 开启，并提供 6 个实时力系数滑块及连续/固定布局切换。它同时启用自定义头像节点插槽、可拖拽工具窗、小地图和共享画布设置，用于评估更丰富渲染在高负载力导场景下的表现。"},{"name":"性能模式测试-Tree","name_en":"Tree - Performance Mode Test","path":"performance-test-tree-layout","meta":{"vip":true,"entVip":true},"desc_en":"This example builds a full-screen stress playground for relation-graph\'s built-in tree layout in performance mode. It regenerates synthetic hierarchies at multiple size presets, keeps custom employee-card nodes and a minimap active, and lets users retune layout and connector presentation on the live graph.","desc_zh":"这个示例构建了 relation-graph 内置树布局在性能模式下的全屏压测场。它可按多种规模预设重新生成合成层级数据，保持自定义员工卡片节点和小地图启用，并允许在实时图上继续调整布局与连接器表现。"},{"name":"力导向布局节点权重与连线弹性","name_en":"Force Layout Node Weight And Line Elasticity","path":"force-layout-node-weight-and-line-elasticity","meta":{"vip":true},"desc_en":"A full-screen force-layout playground that compares per-node weight and per-line elasticity on the same live graph. Users can randomize the value ranges, retune the running solver, and add child nodes while relation-graph recalculates the layout.","desc_zh":"这是一个全屏力导布局调试场，用于在同一实时图上对比按节点权重和按连线弹性两种效果。用户可随机化取值范围、重新调参运行中的求解器，并在 relation-graph 重新计算布局时动态添加子节点。"},{"name":"自定义力学布局颜色聚类","name_en":"Custom Force Layout Color Clustering","path":"custom-force-layout-color-clustering","meta":{"vip":true,"isNew":true},"desc_en":"This example seeds a node-only graph with random positions and random colors, mounts a custom `RGLayouts.ForceLayout` subclass, and makes same-color nodes cluster together on a dark canvas. A floating helper window lets users retune the force parameters, switch canvas interaction modes, and export the current clustered view.","desc_zh":"这个示例以随机位置和随机颜色初始化仅节点图，挂载自定义 `RGLayouts.ForceLayout` 子类，让同色节点在深色画布上聚集。悬浮辅助窗可调整力学参数、切换画布交互模式，

1并导出当前聚类视图。"},{"name":"自定义力学布局同心圆轨道","name_en":"Custom Force Layout on Concentric Rings","path":"custom-force-layout-concentric-rings","meta":{"vip":true,"isNew":true},"desc_en":"This example mounts a custom `RGLayouts.ForceLayout` subclass that keeps relationship nodes moving under force rules while constraining them to configurable concentric rings. A floating control panel lets users retune repulsion, line elasticity, ring diameters, canvas behavior, and image export on the live graph.","desc_zh":"这个示例挂载自定义 `RGLayouts.ForceLayout` 子类，在力学规则驱动关系节点运动的同时，将其约束在可配置的同心圆轨道上。悬浮控制面板可实时调整斥力、连线弹性、环半径、画布行为和图片导出。"},{"name":"力导向聚类与受控锚点运动","name_en":"Force Clustering with Controlled Anchor Motion","path":"force-clustering-with-controlled-anchor-motion","meta":{"vip":true,"isNew":true},"desc_en":"This example uses hidden zero-opacity links to keep three groups clustered in a live force layout, then drives the group anchors around the root with a timer. It combines slot-based node rendering, a canvas backdrop, runtime line-visibility inspection, theme switching, `RGMiniView`, and a shared floating settings and export panel. It is most useful as a reference for controlled motion on top of relation-graph\'s built-in force solver.","desc_zh":"这个示例使用隐藏的零透明度连线，让三组节点在实时力导布局中保持聚类，并通过定时器驱动组锚点围绕根节点运动。它结合插槽节点渲染、画布背景、运行时连线可见性检查、主题切换、`RGMiniView` 以及共享悬浮设置与导出面板，适合作为在内置力求解器之上实现受控运动的参考。"},{"name":"文件夹布局与连线偏移控制","name_en":"Folder Layout with Line Offset Control","path":"folder-layout-line-offset","meta":{"isNew":true},"desc_en":"This example shows how to render a nested dataset with relation-graph\'s built-in folder layout and a custom node slot that makes parent nodes look like folders. It also demonstrates a reusable runtime pattern: batch-updating loaded connectors so one slider changes the line start offset across the whole graph.","desc_zh":"这个示例展示如何使用 relation-graph 内置 folder 布局渲染嵌套数据，并通过自定义节点插槽让父节点呈现为文件夹外观。它还演示了可复用的运行时模式：批量更新已加载连接器，让一个滑块统一改变全图连线起点偏移。"},{"name":"组织机构树 Folder 布局","name_en":"Organization Tree Folder Layout","path":"organization-tree-folder-layout","meta":{"vip":true,"isNew":true},"desc_en":"This example renders a left-to-right organizational hierarchy with relation-graph\'s folder layout and custom company-card nodes. It preprocesses nested tree data into RGJsonData, then lets users tune connector offset and folder spacing at runtime while keeping canvas settings and image export in a shared floating utility window.","desc_zh":"这个示例使用 relation-graph 的 folder 布局和自定义企业卡片节点渲染一棵左到右组织层级树。它先把嵌套树数据预处理为 RGJsonData，再允许用户在运行时调节连接器偏移与 folder 间距，同时在共享悬浮工具窗中保留画布设置与图片导出。"},{"name":"企业关系四象限固定布局","name_en":"Enterprise Quadrant Fixed Layout","path":"enterprise-quadrant-fixed-layout","desc_en":"This example builds a four-quadrant enterprise relationship graph in relation-graph\'s fixed layout mode. It generates RGJsonData from category lists, computes manual coordinates in a separate layout pass, and lets users retune spacing at runtime from a floating control window.","desc_zh":"这个示例在 relation-graph 固定布局模式下构建企业关系四象限图。它根据类别列表生成 RGJsonData，通过独立布局步骤计算手工坐标，并允许用户在悬浮控制窗中实时调整间距。"},{"name":"中心布局与树布局组合","name_en":"Center and Tree Layout Composition","path":"center-and-tree-layout-composition","meta":{"vip":true,"entVip":true},"desc_en":"This example loads two disconnected relation-graph datasets into one fixed canvas and places them with separate built-in layout passes. It is a focused reference for a bounds-based handoff pattern: center one subgraph f

1irst, measure it, then offset a left-to-right tree beside it while keeping the whole scene in one viewer.","desc_zh":"这个示例构建了一个只读的 `relation-graph` 查看器，在同一张画布中放置两个彼此断开的子网络。其中一个子图被绘制为以中心为焦点的聚簇，另一个则被绘制为从左到右展开的树，并放置在该聚簇的右侧。"},{"name":"自定义混合子图布局","name_en":"Custom Mixed Subgraph Layouts","path":"custom-mixed-subgraph-layouts","meta":{"vip":true,"entVip":true},"desc_en":"This example loads one static relation-graph dataset, partitions it by group metadata, and composes five subgraphs with different layout strategies on a single fixed canvas. It is a strong reference for metadata-driven mixed-layout orchestration, especially when per-group styling and one embedded force-driven region need to coexist in one viewer scene.","desc_zh":"这个示例加载一份静态 relation-graph 数据，按分组元数据拆分后，在同一固定画布上组合 5 个采用不同布局策略的子图。它非常适合作为元数据驱动混合布局编排的参考，尤其是需要按组定制样式并让一个内嵌力导区域与其他布局共存的场景。"},{"name":"顺序树组布局","name_en":"Sequential Tree Group Layout","path":"sequential-tree-group-layout","meta":{"vip":true,"entVip":true},"desc_en":"This example takes one local hierarchy, splits its first-level branches into separate relation-graph groups, and lays each group out with its own left-to-right folder layout inside a fixed canvas. It then recenters a shared root above the combined bounds, adds display-only orthogonal connectors, and reruns the composition when branches expand or collapse.","desc_zh":"这个示例读取一棵本地层级树，将一级分支拆分为独立 relation-graph 分组，并在固定画布内为每组应用各自的左到右 folder 布局。随后它会把共享根节点重新居中到合并边界上方，添加仅展示用正交连接线，并在分支展开/收起时重新执行整体组合布局。"},{"name":"连通子关系网布局切换","name_en":"Connected Subnetwork Layout Switcher","path":"connected-subnetwork-layout-switcher","videoImage":true,"meta":{"vip":true},"desc_en":"This example shows how to click a node, detect its connected subnetwork, and relayout only that group inside a shared relation-graph canvas. It combines four preset layouts, selection-scoped editing controls, a minimap, and a floating helper window while keeping other disconnected graph islands loaded.","desc_zh":"这个示例构建了一个单一的 relation-graph 画布，其中包含两个彼此断开的图岛，并允许用户只对当前点击节点周围的图岛重新布局。界面组合了主图、小地图、一个浮动辅助窗口，以及一个显示在当前活动编辑分组上方的小型预设选择器。"},{"name":"多组关系网布局与样式编辑器","name_en":"Multi-Group Graph Layout and Style Editor","path":"multi-group-layout-style-editor","meta":{"vip":true,"entVip":true},"desc_en":"Builds a fixed-canvas graph workbench where users can insert randomly generated tree groups, assign each group its own layout and visual style, and then edit or delete the group as a unit. The example combines per-group sublayout execution, floating configuration panels, selection overlays, minimap support, and shared canvas export and interaction settings.","desc_zh":"这个示例构建了一个固定画布图谱工作台，用户可插入随机生成的树分组，为每组分配独立布局与视觉样式，并以组为单位进行编辑或删除。示例结合了分组子布局执行、悬浮配置面板、选中态覆盖层、小地图支持，以及共享画布导出与交互设置。","videoImage":true},{"name":"工业链卡片锚点混合布局","name_en":"Industrial Chain Card-Anchored Mixed Layout","path":"industrial-chain-card-anchored-mixed-layout","meta":{"vip":true,"entVip":true},"desc_en":"A viewer-oriented relation-graph demo that combines a fixed outer graph with a custom mixed-layout pipeline for an industrial value chain dashboard. Ordinary canvas-slot card rows become graph anchors through `RGConnectTarget` and `addFakeLines(...)`, while per-group tree layouters and dependency refs keep attached subtrees synchronized during expand, collapse, and depth-based bulk expansion.","desc_zh":"这是一个偏查看器的 relation-graph 示例，用于工业价值链看板：外层图使用固定布局，内部采用自定义混合布局管线。普通画布插槽卡片行通过 `RGConnectTarget` 与 `addFakeLines(...)` 转为图锚点，同时按组树布局器和依赖引用可在展开、收起及按层批é‡

1å±•å¼€æ—¶ä¿æŒé™„属子树同步。"},{"name_en":"Industry Chain Group Layout Editor","name":"产业链关系组布局编辑器","path":"industry-chain-group-layout-editor","meta":{"vip":true,"entVip":true,"isNew":true},"desc_en":"This example builds an editable industry value chain board where HTML stage cards anchor several relation-graph tree groups on one fixed canvas. Users can select a whole group, adjust node, line, and tree-layout settings, insert a new random tree at a chosen row position, and trigger dependency-aware relayout as the structure changes.","desc_zh":"这个示例构建了一个可编辑的产业价值链看板：HTML 阶段卡片在同一固定画布上锚定多个 relation-graph 树分组。用户可以整组选中、调整节点/连线/树布局参数、在指定行插入新的随机树，并在结构变化时触发带依赖感知的重布局。"},{"name":"智能树布局","name_en":"Smart Tree Layout","path":"smart-tree-layout","meta":{"vip":true,"entVip":true},"desc_en":"This example shows how to load one generic relationship dataset into relation-graph\'s smart-tree layout and switch the mounted graph between horizontal and vertical presets. It also demonstrates the extra runtime step of resizing existing nodes and resetting line shape before relayout, together with a shared viewer shell for mini-view, canvas settings, and image export.","desc_zh":"这个示例展示如何将通用关系数据加载到 relation-graph 的智能树布局，并在运行时在横向与纵向预设间切换。它还演示了重布局前对现有节点重设尺寸、重置线形的额外步骤，并复用带小地图、画布设置和图片导出的共享查看器外壳。"},{"name":"IO Tree 布局方向与连线路由","name_en":"IO Tree Layout Orientation and Link Routing","path":"io-tree-layout-orientation-and-link-routing","meta":{"vip":true,"entVip":true},"desc_en":"This example builds a static IO-tree viewer that can switch between horizontal and vertical presets at runtime. Its main lesson is a post-layout routing pass that compares computed node levels and rewrites each line\'s junction anchors, offsets, and geometry so inbound and outbound branches remain readable.","desc_zh":"这个示例构建了一个静态 IO Tree 查看器，可在运行时切换横向与纵向预设。核心是布局后的路由修正步骤：对比计算得到的节点层级，重写每条连线的连接锚点、偏移和几何参数，以保持输入/输出分支可读。"},{"name":"Dagre 布局接入与连线标签定位","name_en":"Dagre Layout Integration and Line Label Positioning","path":"dagre-layout-integration-and-line-labels","meta":{"vip":true},"desc_en":"A relation-graph example that renders custom node cards first, measures their live dimensions, then runs Dagre externally and writes the computed coordinates back into a fixed-layout scene. It also keeps orthogonal labeled connectors, a minimap overlay, and shared canvas utilities such as export and runtime interaction settings.","desc_zh":"这是一个 relation-graph 示例：先渲染自定义节点卡片并测量实时尺寸，再在外部运行 Dagre，将计算坐标回写到固定布局场景。它还保留了正交带标签连接线、小地图覆盖层，以及导出和运行时交互设置等共享画布工具。"},{"name":"Dagre位置布局运行时控制","name_en":"Dagre Position Layout Runtime Controls","path":"dagre-position-layout-runtime-controls","meta":{"vip":true},"desc_en":"This example builds a fixed-layout relation-graph scene that lets relation-graph render and measure the nodes, then hands position calculation to Dagre. Its main lesson is how to keep Dagre\'s ranker and spacing parameters live at runtime while preserving custom node cards, orthogonal labeled connectors, a minimap, and shared canvas utilities.","desc_zh":"这个示例构建固定布局 relation-graph 场景，让 relation-graph 负责节点渲染与测量，再把位置计算交给 Dagre。重点是如何在运行时保持 Dagre 的 ranker 和间距参数可调，同时保留自定义节点卡片、正交带标签连线、小地图和共享画布工具。"},{"name":"使用 Graphology ForceAtlas2 布局","name_en":"Use Graphology ForceAtlas2 Layout","path":"use-graphology-forceatlas2-layout","meta":{"vip":true}

1,"desc_en":"A relation-graph example that renders sample data first, reads the measured node sizes, then runs a Graphology circular plus ForceAtlas2 pass and writes scaled coordinates back into a fixed-layout scene. It also adds dataset switching, layout-scale tuning, and a shared floating panel for canvas settings and image export.","desc_zh":"这是一个 relation-graph 示例：先渲染样例数据并读取节点实测尺寸，再执行 Graphology 圆形初始化 + ForceAtlas2 计算，并将缩放后的坐标写回固定布局场景。它还提供数据集切换、布局缩放调节，以及共享悬浮面板中的画布设置与图片导出。"},{"name":"D3 Treemap/Pack 布局接入","name_en":"D3 Treemap and Pack Layout Integration","path":"d3-treemap-pack-layout-integration","meta":{"vip":true},"desc_en":"This example loads a static relation graph in `fixed` mode, rebuilds a D3 hierarchy from the live graph tree, and writes treemap or circle-pack geometry back into relation-graph nodes. A floating selector lets users switch the same graph between the two D3 layouts while keeping custom node slots, a minimap, shared canvas settings, and image export.","desc_zh":"这个示例在 `fixed` 模式加载静态关系图，从实时图树重建 D3 层级，再把 treemap 或 circle-pack 几何结果回写到 relation-graph 节点。悬浮选择器可在同一图上切换这两种 D3 布局，同时保留自定义节点插槽、小地图、共享画布设置和图片导出。"},{"name_en":"System Architecture Diagram with Custom Layout","name":"系统架构图（自定义布局）","path":"system-architecture-diagram","desc_en":"This example renders a layered system architecture diagram from an embedded hierarchical dataset. It flattens the source tree into RGJsonData, hides structural links, repacks each group\'s children with a custom post-layout pass, and adds viewer controls such as depth presets, palette changes, a minimap toggle, and image export.","desc_zh":"这个示例基于内嵌层级数据渲染分层系统架构图。它先把源树扁平化为 RGJsonData，隐藏结构性连线，再通过自定义后处理布局重新打包各组子节点，并提供深度预设、配色切换、小地图开关和图片导出等查看控制。"},{"name":"自定义节点企业服务宣传卡片","name_en":"Custom Node Enterprise Service Promo Card","path":"custom-node-enterprise-promo-card","meta":{"vip":true,"entVip":true,"isNew":true},"desc_en":"This example uses a fixed-layout `RelationGraph` as a presentation canvas for one oversized enterprise promo card rendered through `RGSlotOnNode`. It also reuses the shared floating helper window for runtime wheel and drag mode switching plus image export, making it a focused reference for graph-hosted branded UI rather than layout variation.","desc_zh":"这个示例把固定布局 `RelationGraph` 当作展示画布，通过 `RGSlotOnNode` 渲染一张超大企业宣传卡。它还复用共享悬浮辅助窗提供滚轮/拖拽模式切换和图片导出，更适合作为图谱承载品牌化 UI 的参考，而非布局变化示例。"},{"name_en":"Bidirectional Tree Layout","name":"双向关系树布局","path":"bidirectional-tree-layout","desc_en":"This example builds a root-centered bidirectional tree and lets the user switch the same dataset between horizontal and vertical tree presets. After layout, it uses `node.lot.level` to re

1color the incoming branch and optionally reverse that branch\'s arrow direction without reloading the data.","desc_zh":"这个示例构建了一棵以单个根节点为中心的双侧树。一侧分支流向根节点，另一侧分支从根节点向外展开，并且整个图可以在不更改数据集本身的前提下，在横向树和纵向树之间切换。"},{"name_en":"Google Income Statement Ribbon Infographic","name":"谷歌经营损益丝带图","path":"google-income-statement-ribbon-infographic","desc_en":"A standalone financial infographic viewer that renders a Google income statement as a left-to-right relation graph with amount-scaled node bars and proportional ribbon flows. It combines recursive RGJsonData preprocessing, custom node and line slots, and lightweight checked-state interactions into a compact final-state reference.","desc_zh":"这是一个独立的财务信息图查看器，将 Google 利润表渲染为左到右关系图，包含按金额缩放的节点条和按比例流动的丝带连线。它结合递归 RGJsonData 预处理、自定义节点与连线插槽，以及轻量选中态交互，形成紧凑的最终态参考。"},{"name_en":"Industry Chain Hierarchy Map","name":"产业链层级图谱","path":"industry-chain-hierarchy-map","desc_en":"This example renders a semiconductor industry-chain hierarchy as a top-down relation-graph tree with custom card nodes. It uses computed node levels to control expansion depth, card styling, and semantic headers, and it adds a floating helper panel with a minimap toggle, canvas settings, and image export.","desc_zh":"这个示例将半导体产业链层级渲染为自上而下的 relation-graph 树，并使用自定义卡片节点。它利用计算得到的节点层级控制展开深度、卡片样式和语义标题，并提供带小地图开关、画布设置和图片导出的悬浮辅助面板。"},{"name_en":"Corporate Equity Structure Diagram","name":"企业股权结构图","path":"corporate-equity-structure-diagram","meta":{"vip":true},"desc_en":"This example renders a top-down corporate ownership diagram with investors above the focal company and subsidiaries below it. It combines custom company-card node slots, post-layout cleanup for upstream branches, one-time lazy subsidiary expansion, and a shared floating panel for canvas settings and image export.","desc_zh":"这个示例渲染自上而下的企业股权结构图：投资方位于焦点公司上方，子公司位于下方。它结合自定义企业卡片节点插槽、上游分支布局后清理、一次性懒加载子公司展开，以及用于画布设置和图片导出的共享悬浮面板。"},{"name_en":"Investment and Shareholder Relationship Explorer","name":"投资与股东关系探查","path":"investment-shareholder-relationship-explorer","meta":{"vip":true},"desc_en":"This example renders a focal-company relationship explorer with in-graph controls for investment, shareholder, and historical-investment branches. It combines typed lazy loading through appended RGJsonData fragments, post-layout expand-holder normalization, custom node slots, and a shared floating panel for canvas settings and image export.","desc_zh":"这个示例渲染围绕焦点公司的关系探查图，图内可控制投资、股东和历史投资分支。它结合按类型的懒加载（通过追加 RGJsonData 片段）、布局后展开占位归一化、自定义节点插槽，以及用于画布设置和图片导出的共享悬浮面板。"},{"name_en":"Show All Preloaded Branch Nodes","name":"显示分支中的全部预加载节点","path":"show-all-preloaded-branch-nodes","meta":{"vip":true},"desc_en":"This example shows how to preload several company-relationship branches, keep most branch members hidden, and reveal an entire branch through a synthetic `Show More(...)` node rendered inside the graph. It also demonstrates typed node-slot rendering, a left-to-right orthogonal tree layout, and a shared floating settings panel for interaction tuning and image export.","desc_zh":"这个示例展示如何预加载多个企业关系分支、先隐藏大多数成员，再通过图内合成的 `Show More(...)` 节点一次性展开整条分支。它还演示了类型化节点插槽渲染、左到右正交树布局，以及用于交互调参和图片导出的共享悬浮设置面板。"},{"name_en":"Lazy-Load Paginated Branch Nodes","name":"分页懒加载分支节点","path":"lazy-load-paginated-branch-nodes","meta":{"vip":true},"desc_en":"This example shows how to lazy-load paginated investment and shareholder branches inside a left-to-right corporate relationship tree. The first page arrives on branch expand, later pages arrive through a synthetic `Load More(...)` node rendered inside the graph, and a floating helper window lets the user tune page size and access shared canvas settings and image export.","desc_zh":"这个示例展示如何在左到右企业关系树中对投资与股东分支进行分页懒加载。首批数据在分支展开时加载，后续分页通过图内合成的 `Load More(...)` 节点触发；悬浮辅助窗可调分页大小并提供共享画布设置与图片导出。"},{"name":"贸易伙伴关系探查","name_en":"Trade Partner Relationship Explorer","path":"trade-partner-relationship-explorer","desc_en":"This example builds a trade-oriented relationship viewer around one focal company, with inbou

1nd categories above the root and outbound categories below it. Expanding a category lazily appends company nodes, while checked company chips can open a partner card and root controls can hide the upper or lower branch set independently.","desc_zh":"这个示例围绕一个焦点公司构建贸易关系查看器，根节点上方是入向类别，下方是出向类别。展开类别时会懒加载企业节点；被选中的企业标签可打开伙伴卡片，根节点控制项还可独立隐藏上/下两组分支。"},{"name_en":"Database Foreign Key Diagram","name":"数据库表外键关系图","path":"database-foreign-key-diagram","desc_en":"A fixed-layout database schema viewer that renders each table as a custom card and connects specific column rows with curved fake lines. It preprocesses table, column, and relation metadata into slotted node content plus `RGConnectTarget` endpoint ids, then layers in a draggable helper window for canvas settings and image export.","desc_zh":"这是一个固定布局的数据库结构查看器，将每张表渲染为自定义卡片，并用曲线假连线连接具体字段行。它先把表、字段和关系元数据预处理为插槽节点内容与 `RGConnectTarget` 端点 id，再叠加可拖拽辅助窗提供画布设置和图片导出。"},{"name_en":"Class Members and Interest Group Relations","name":"班级成员与兴趣小组关系图","path":"class-members-and-interest-group-relations","meta":{"vip":true},"desc_en":"This example builds a school activity relationship board inside `RGSlotOnCanvas` instead of rendering ordinary graph nodes. It connects group cards, member cards, and map pins through `RGConnectTarget` ids, then regenerates fake lines from the current selection while a shared floating panel controls canvas behavior and image export.","desc_zh":"这个示例构建的是一个学校活动关系看板，而不是传统的节点连线图。半透明的学校地图、可点击的位置图钉、左侧的兴趣小组列表以及右侧的班级成员列表，都渲染在同一个 relation-graph canvas 中。"},{"name_en":"Map-Linked Warehouse and Product Overview","name":"地图联动仓库商品概览","path":"map-linked-warehouse-product-overview","meta":{"vip":true},"desc_en":"This example composes a US map backdrop, warehouse cards, and product cards inside RGSlotOnCanvas, then uses RGConnectTarget anchors and fake lines to highlight the current selection. It is primarily a reference for map-backed DOM-e

1ndpoint wiring and master-detail synchronization rather than a stable inventory data model.","desc_zh":"这个示例在 `RGSlotOnCanvas` 中组合美国地图背景、仓库卡片和商品卡片，再通过 `RGConnectTarget` 锚点与假连线高亮当前选择。它主要用于参考地图背景下的 DOM 端点连线与主从联动，而非稳定的库存数据模型。"},{"name_en":"Business Unit Organizational Chart","name":"事业群组织架构图","path":"business-unit-organizational-chart","meta":{"vip":true},"desc_en":"This example documents a presentation-oriented organizational chart built from one company hierarchy that is split into business-unit subtrees and recomposed under a shared executive root. It uses custom role cards, per-group folder layouts, expand-collapse relayout, a minimap, and a floating settings and export panel to turn a static hierarchy into a structured viewer.","desc_zh":"这个示例构建了一个只读组织架构图，包含一个公司根节点和若干一级业务单元。画布会展示一张顶部高管卡片，其下方是四个横向排列的业务单元子树，并配有正交连线、基于层级深度的颜色强调、缩略图，以及围绕图谱的浮动工具窗口。"},{"name_en":"Corporate Group Relationship Map","name":"企业集团关系图谱","path":"corporate-group-relationship-map","desc_en":"This example renders a dense corporate relationship map from a static inline dataset and fits it into a centered relation-graph canvas. Users can switch live nodes between circular and rectangular presentations, optionally replace built-in nodes with custom slot content, adjust canvas interaction modes, and export the current view as an image.","desc_zh":"这个示例从静态内联数据渲染一个高密度企业关系图，并将其适配到居中的 relation-graph 画布。用户可实时在圆形/矩形节点表现间切换，按需用自定义插槽替换内置节点，调整画布交互模式，并导出当前视图图片。"},{"name_en":"Corporate Group Relationship Tree","name":"企业集团关系树","path":"corporate-group-relationship-tree","desc_en":"This example renders a Tencent-centered corporate relationship tree from a static local RGJsonData payload and fits it into a full-height relation-graph canvas. It customizes node rendering with a root banner and vertical company badges, lazy-loads one placeholder branch through append APIs, and reuses the shared floating helper window for canvas settings and image export.","desc_zh":"这个示例使用静态本地 RGJsonData 渲染以腾讯为中心的企业关系树，并适配到全高 relation-graph 画布。它通过根节点横幅和竖向企业徽章自定义节点渲染，使用 append API 懒加载一个占位分支，并复用共享悬浮辅助窗提供画布设置和图片导出。"},{"name_en":"Network Topology Monitor","name":"网络拓扑监控","path":"network-topology-monitor","desc_en":"This example turns relation-graph into a fixed-position network topology monitor with a dark dashboard shell. It loads inline service and execution-node data at mount time, applies category-specific custom node cards, and uses the built-in toolbar, pan, zoom, and selection emphasis for inspection.","desc_zh":"这个示例把 relation-graph 变成固定位置的网络拓扑监控面板，并采用深色仪表盘外壳。它在挂载时加载内联服务与执行节点数据，应用按类别区分的自定义节点卡片，并利用内置工具栏、平移、缩放和选中强调进行巡检。"},{"name_en":"Infrastructure Topology Dashboard","name":"基础设施拓扑看板","path":"infrastructure-topology-dashboard","desc_en":"This example presents a small infrastru

1cture topology as a monitoring-style relation-graph viewer with typed server, database, and service nodes. It combines mount-time graph initialization, a left-to-right tree layout, custom node-slot rendering, and a canvas-level VPC backdrop in one compact read-only scene.","desc_zh":"这个示例将一个小型基础设施拓扑呈现为监控风 relation-graph 查看器，包含类型化的服务器、数据库和服务节点。它在一个紧凑只读场景中结合了挂载时图初始化、左到右树布局、自定义节点插槽渲染和画布级 VPC 背景。"},{"name_en":"Cloud Infrastructure Topology via Canvas Slot","name":"基于画布插槽的云基础设施拓扑","path":"canvas-slot-cloud-infrastructure-topology","desc_en":"This example builds a three-panel cloud infrastructure board inside RGSlotOnCanvas and uses RGConnectTarget anchors plus fake lines to connect selected server labels across the scene. It is a view-only pattern for teams that need relation-graph to supply the connector layer and viewport control behind a custom HTML dashboard.","desc_zh":"这个示例构建的是一个固定的、仪表盘风格的基础设施看板，而不是传统的节点连线图。可见场景是一个包含 `Dr. Peng Data Center`、`Tencent Cloud` 和 `Azure Cloud` 的三面板拓扑视图，每个面板内都放置了带有硬件详情的白色服务器清单卡片。"},{"name_en":"System Architecture Diagram Editor","name":"系统架构图编辑器","path":"system-architecture-diagram-editor","desc_en":"This example renders a layered system architecture board from a hardcoded hierarchical dataset while keeping the structural parent-child links hidden. It combines fixed-layout graph loading, custom post-layout group packing, inline node text editing, resize and snap overlays, group toolbar actions, depth presets, palette controls, and image export to create a lightweight architecture editor.","desc_zh":"这个示例基于硬编码层级数据渲染分层系统架构看板，并隐藏结构性的父子连线。它结合固定布局图加载、自定义后处理分组排布、节点文本内联编辑、缩放与吸附覆盖层、分组工具栏动作、深度预设、配色控制和图片导出，形成一个轻量架构编辑器。"},{"name_en":"Force Classifier","name":"分类器","path":"force-classifier","desc_en":"This example generates a synthetic set of user nodes and recluster

1s them with a custom force layout whenever the active grouping field changes. It demonstrates imperative graph loading, slot-based node badges, a floating legend, and shared canvas utilities for interaction-mode switching and image export.","desc_zh":"这个示例生成一组模拟用户节点，并在分组字段切换时通过自定义力布局重新聚类。它演示了命令式图加载、基于插槽的节点徽章、悬浮图例，以及用于交互模式切换和图片导出的共享画布工具。"},{"name_en":"Attribute-Grouped Force Clustering","name":"按属性分组的力导聚类","path":"attribute-grouped-force-clustering","desc_en":"This example builds a live force-layout clustering canvas that groups synthetic user nodes by Region, Major, Grade, or Gender. A custom force layouter, timer-based node appends, slot-based node rendering, and shared canvas utilities make it a strong reference for metadata-driven segmentation dashboards.","desc_zh":"这个示例构建了一个全屏力导布局实验场，它的表现更像一个实时分群场，而不是传统的关系图。它从少量合成用户节点开始，随着时间不断追加新用户，并允许查看者按 Region、Major、Grade 或 Gender 对同一批群体重新分组。核心点在于，可见的聚类来自共享的元数据取值，而不是来自可见连线。"},{"name_en":"Character Relationship Graph Filters","name":"人物关系图筛选","path":"character-relationship-graph-filters","desc_en":"This example builds a read-only people-relationship viewer with avatar nodes, relation labels, and an external toolbar for gender, alignment, and relation-type filtering. It loads one mocked async dataset into relation-graph, then uses updateNode(...) and updateLine(...) to dim unmatched items so the full network stays visible as context.","desc_zh":"此示例构建了一个只读的人物关系查看器，包含力导向画布、头像风格节点、带标签的关系连线、全宽过滤栏以及一个悬浮辅助窗口。图谱会填满页面高度，保持完整角色集合可见，并将 `teacher-student`、`relative`、`collusion` 和 `report` 等关系直接展示在连线路径上。","videoImage":true,"meta":{"vip":true}},{"name_en":"Character Relationship Graph Operations","name":"人物关系图交互操作","path":"character-relationship-graph-operations","meta":{"vip":true},"desc_en":"This example loads a mocked character relationship network into a force-directed relation-graph scene and renders each person as an avatar circle with labels below. Clicking a node opens a radial action menu for renaming, copying, adding children, creating links, and opening a fixed detail card for live node property edits.","desc_zh":"这个示例构建了一个力导向的人物关系图，它的行为更像一个轻量级编辑工作区，而不是只读的网络视图。画布以一份预先准备好的角色关系数据集为起点，将每个人渲染为圆形头像节点，并在选中节点上叠加一个以节点为中心的径向菜单，以及一个固定在侧边的节点编辑面板。"},{"name_en":"Shortest Path Query","name":"最短路径查询","path":"shortest-path-query","meta":{"vip":true},"desc_en":"This example loads a people relationship graph, derives searchable endpoint options from the live relation-graph instance, and lets users query the shortest connection between two selected nodes. It then maps the result back onto the rendered canvas by dimming unrelated nodes and lines while thickening the active route inside a draggable utility window.","desc_zh":"这个示例加载人物关系图，从实时 relation-graph 实例中提取可搜索端点选项，并允许用户查询两个选定节点之间的最短连接。随后它将结果映射回画布：弱化无关节点与连线，同时加粗活动路径，并放在可拖拽工具窗中操作。"},{"name_en":"Graph Editor with Context Menu and Local Save","name":"带右键菜单和本地保存的关系图编辑器","path":"graph-editor-with-context-menu-and-local-save","meta":{"vip":true,"entVip":true},"desc_en":"This example turns relation-graph into a lightweight in-browser graph editor with toolbar-driven node and line creation, target-aware right-click deletion, relayout controls, and local save-and-restore. It also layers shared canvas settings and image export utilities over the same workspace, making it a compact reference for editable graph shells rather than a read-only viewer.","desc_zh":"这个示例把 relation-graph 变成轻量浏览器内图编辑器，支持工具栏创建节点/连线、识别目标的右键删除、重布局控制与本地保存恢复。它还在同一工作区叠加共享画布设置

1和图片导出工具，适合作为可编辑图框架参考而非只读查看器。"},{"name":"PCB元件连线编辑器","name_en":"PCB Component Wiring Editor","path":"pcb-component-wiring-editor","meta":{"vip":true,"entVip":true},"desc_en":"This example shows how to build a PCB-style component wiring workspace with fixed-position nodes, a drag-in component palette, and custom chip or part renderers that expose many pin-level connection targets. It also combines multi-selection, selected-wire path editing, runtime canvas settings, and image export on the same relation-graph surface.","desc_zh":"这个示例展示如何构建 PCB 风元件布线工作区：节点固定定位、组件面板拖入创建，以及暴露多引脚连接目标的芯片/元件自定义渲染。它还在同一 relation-graph 画布上结合了多选、选中导线路径编辑、运行时画布设置和图片导出。"},{"name_en":"Zodiac Compatibility Matcher","name":"星座配对","path":"zodiac-compatibility-matcher","meta":{"vip":true,"isNew":true},"desc_en":"This example turns a force-layout graph into a two-sided zodiac matcher with mirrored card clusters and a hidden summary node. After one sign is selected on each side, the graph reveals a large in-canvas result card and rewires two connectors to the chosen pair.","desc_zh":"这个示例把力导图变成双侧星座配对器，左右镜像卡片簇加一个隐藏的汇总节点。左右各选一个星座后，图内会显示大尺寸结果卡，并把两条连接线重连到所选配对。"},{"name_en":"Toys - Clock","name":"小玩意-时钟","path":"toys-clock","meta":{"vip":true},"desc_en":"This example builds a self-running clock-like radial graph from one center node, sixty generated second nodes, and a separate moving marker node. It is a compact reference for timer-driven playback, checked-state synchronization, and custom node-slot rendering in a viewer-only relation-graph scene.","desc_zh":"这个示例用一个中心节点、60 个生成的秒节点和一个独立移动标记节点，构建了一个自运行的时钟式径向图。它是计时驱动回放、选中态同步和自定义节点插槽渲染在只读 relation-graph 场景中的紧凑参考。"},{"name_en":"Timer-Driven Force Layout Parameter Cycling","name":"定时切换力学参数的力导向图","path":"timer-driven-force-layout-parameter-cycling","meta":{"vip":true},"desc_en":"This example builds a full-screen force-layout viewer that loads a large inline branching dataset, zooms out, and then alternates force coefficients every three seconds so the cluster keeps re-forming. It uses relation-graph\'s built-in force engine, `setJsonData(...)`, `setZoom(30)`, and `updateOptions(...)` rather than a control panel or custom node rendering.","desc_zh":"这个示例构建了一个全屏力导查看å

1™¨ï¼šåŠ è½½å¤§åž‹å†…联分支数据后先缩小视图，然后每 3 秒切换一次力学系数，让簇结构持续重组。它使用 relation-graph 内置力引擎以及 `setJsonData(...)`、`setZoom(30)`、`updateOptions(...)`，而非控制面板或自定义节点渲染。"},{"name":"节点尺寸调整与控件样式","name_en":"Node Resize Controls and Styles","path":"node-resize-controls-and-styles","desc_en":"This example turns a small relation graph into a focused selected-node resizing workspace. It demonstrates how `setEditingNodes([node])`, `RGEditingNodeController`, and `RGEditingResize` work together, and it also shows how the built-in resize overlay can be switched between the default look and two custom SCSS skins.","desc_zh":"这个示例把小型关系图变成聚焦“选中节点缩放”的工作区。它演示 `setEditingNodes([node])`、`RGEditingNodeController` 与 `RGEditingResize` 的协同方式，并展示内置缩放覆盖层如何在默认外观与两套自定义 SCSS 皮肤之间切换。"},{"name":"双击编辑节点文字","name_en":"Double click to edit node text","path":"edit-node-text","desc_en":"This example shows a fixed-layout relation-graph that replaces the default node body with a custom inline editor. It demonstrates mode-gated double-click label editing, keyboard and blur commit or cancel behavior, `graphInstance.updateNode()` persistence, and a shared floating panel for canvas settings and image export.","desc_zh":"这个示例展示固定布局 relation-graph，用自定义内联编辑器替换默认节点主体。它演示了模式控制的双击改名、键盘与失焦提交/取消行为、`graphInstance.updateNode()` 持久化，以及用于画布设置和图片导出的共享悬浮面板。"},{"name":"预设工具栏创建节点与连线","name_en":"Preset Toolbar Node and Line Creation","path":"preset-toolbar-node-and-line-creation","meta":{"vip":true},"desc_en":"This example shows a fixed-layout relation-graph editor that uses a view-mounted preset palette to drag-create styled nodes and click-create styled lines. It also demonstrates mixed node rendering through a custom card slot, active creation-state feedback, a shared floating settings panel, and image export helpers.","desc_zh":"这个示例展示固定布局 relation-graph 编辑器：通过视图内挂载的预设面板拖拽创建样式节点、点击创建样式连线。它还演示了基于自定义卡片插槽的混合节点渲染、创建状态反馈、共享悬浮设置面板和图片导出辅助。"},{"name":"批量编辑选中节点","name_en":"Batch Edit Selected Nodes","path":"batch-edit-selected-nodes","meta":{"vip":true},"desc_en":"A centered relation graph is turned into a lightweight node maintenance workspace where the current editing-node set drives multi-select, resize handles, batch recolor actions, and bulk node removal. A shared floating overlay also exposes canvas interaction settings and image export without changing the example\'s main selection-driven editing pattern.","desc_zh":"这个示例在一个居中的 relation graph 之上构建了一个轻量级的节点维护工作区。用户会看到一个位于点状全高画布上的小型图谱、一个悬浮辅助窗口、两个在加载时预选中的节点、当前选区上的尺寸调整手柄，以及一个停靠在所选节点上方的紧凑工具栏。"},{"name":"节点环绕快捷操作栏","name_en":"Around-Node Quick Actions","path":"around-node-quick-actions","meta":{"vip":true},"desc_en":"This example shows how to mount custom quick-action trays around the nodes that are currently in relation-graph\'s editing state. It combines seeded selection, modifier-based multi-select, marquee retargeting, a dotted editor-style canvas, and a floating settings window, while keeping the action chips themselves as placement-focused placeholders.","desc_zh":"这个示例构建了一个轻量级图编辑工作区，在当前处于 relation-graph 编辑状态的节点周围挂载了自定义快捷操作托盘。页面展示了一个全高的点状画布、一个浮动辅助窗口，以及位于编辑节点上方、下方、左侧、右侧和四个角落的白色操作组。"},{"name":"选中节点定向连线创建","name_en":"Selected Node Directional Line Creation","path":"selected-node-directional-line-creation","meta":{"vip":true},"desc_en":"This example shows a focused graph authoring pattern where selecting one node reveals directional chips for creating new outgoing connections. It uses relation-graph\'s editing state, around-node overlay rendering, and interactive line creation flow to save new edges without building a full diagram editor shell.","desc_zh":"这个示例展示一种聚焦的图谱创作模式：选中节点后显示方向芯片，用于创建新的出向连接。它利用 relation-graph 的编辑状态、节点周边覆盖层渲染和交互式连线创建流程，在不搭建完整编辑器壳层的前提下保存新边。"},{"name":"选中节点创建连线并选择目标端点位置","name_en":"Selected Node Line Creation With Target Endpoint Selection","path":"selected-node-line-creation-with-target-endpoint-selection","meta":{"vip":true},"desc_en":"This example shows a compact graph authoring workflow where selecting one node reveals directional chips for launching a new outgoing connection. It combines a custom around-node toolbar with relation-graph\'s built-in connect overlay, so users can start from a preset source side and then choose where the new line attaches on the target node before it is saved.","desc_zh":"这个示例展示紧凑的图谱创作流程：选中节点后显示方向芯片以发起新出向连接。它把自定义节点周边工具栏与 relation-graph 内置连线覆盖层结合，使用户可先指定源侧，再选择目标节点上的连接端点位置后保存新线。"},{"name":"连线端点编辑","name_en":"Line Endpoint Editing","path":"line-endpoint-editing","meta":{"vip":true},"desc_en":"A compact relation-graph editor that lets users click an existing edge and drag its start or end handle to a different node. The demo keeps line-text and path editing disabled, adds toast feedback around the vertex-move lifecycle, and exposes canvas settings plus image export from a floating helper window.","desc_zh":"这是一个紧凑 relation-graph 编辑器，用户可点击已有连线并拖动起点或终点手柄到其他节点。示例禁用了线文字和路径编辑，在顶点移动生命周期中提供 toast 反馈，并通过悬浮辅助窗提供画布设置与图片导出。"},{"name":"连线标签与端点编辑","name_en":"Line Label and Endpoint Editing","path":"line-label-and-endpoint-editing","meta":{"vip":true},"desc_en":"This example shows how to select an existing line, edit its label text, drag the label to a new position, and reconnect its endpoints with relation-graph\'s built-in editing controllers. It also demonstrates selection-state handoff, runtime canvas settings, image export, and toast feedback inside a compact editor-style workspace.","desc_zh":"这个示例展示如何选中已有连线、编辑其标签文本、æ

1‹–拽标签到新位置，并借助 relation-graph 内置编辑控制器重连端点。它还演示了选中态切换、运行时画布设置、图片导出和 toast 反馈，在紧凑编辑工作区内完成。"},{"name":"交互式连线路径编辑","name_en":"Interactive Line Path Editing","path":"interactive-line-path-editing","meta":{"vip":true},"desc_en":"This example shows how to click an existing line and reshape its route with relation-graph\'s built-in line editing overlay. It also coordinates node selection, canvas clearing, runtime canvas settings, and toast feedback inside a compact editor-style workspace.","desc_zh":"这个示例展示如何点击已有连线，并通过 relation-graph 内置连线编辑覆盖层重塑路径。它还在紧凑编辑式工作区中协调了节点选中、画布清空、运行时画布设置和 toast 反馈。"},{"name":"选中连线自定义工具栏","name_en":"Custom Selected Line Toolbar","path":"custom-selected-line-toolbar","meta":{"vip":true},"desc_en":"This example shows how to attach a custom floating toolbar to the currently selected line in a relation-graph canvas. The toolbar follows the line\'s live geometry and lets users change line color, shape, and width or remove the line, while the surrounding helper window also exposes canvas settings and image export.","desc_zh":"这个示例展示如何把自定义悬浮工具栏附着到当前选中的 relation-graph 连线上。工具栏会跟随连线实时几何位置，可修改线色、线形、线宽或删除连线；外围辅助窗还提供画布设置与图片导出。"},{"name":"拖拽节点对齐参考线","name_en":"Node Drag Alignment Guides","path":"node-drag-alignment-guides","meta":{"vip":true},"desc_en":"This example shows how to mount relation-graph\'s alignment-guide overlay so dragged nodes can display temporary reference lines. It also combines an optional adsorption toggle, selection-state coordination, runtime canvas settings, and image export inside a compact editor-style workspace.","desc_zh":"这个示例展示如何挂载 relation-graph 的对齐参考线覆盖层，使拖拽节点时显示临时参考线。它还结合可选吸附开关、选中态协同、运行时画布设置和图片导出，形成紧凑编辑式工作区。"},{"name":"画布坐标尺","name_en":"Canvas Coordinate Ruler","path":"canvas-coordinate-ruler","meta":{"vip":true},"desc_en":"A full-screen relation-graph viewer that overlays top and left SVG rulers on the visible canvas. It composes a center cluster and a right-side tree with separate layout passes, then converts viewport coordinates back into canvas coordinates so the ruler stays accurate while users pan or zoom.","desc_zh":"这个示例构建了一个全屏 relation-graph 查看器，并在其上叠加了两个额外的工作区辅助层：位于顶部和左侧边缘的制图风格标尺，以及悬浮在画布上方的辅助窗口。图本身在同一块画布上组合了两种不同的结构：一个环形中心簇，以及其右侧的一棵独立树。"},{"name":"可调图谱缩略图（鹰眼）","name_en":"Adjustable Graph Minimap","path":"adjustable-graph-minimap","meta":{"vip":true},"desc_en":"This example shows how to mount `RGMiniView` as a graph-overlay minimap on a large force-layout viewer and control its corner placement, width, and height at runtime. A shared floating helper window adds canvas mode switching and image export, while randomized node sizes, shapes, and colors make the overview visually informative.","desc_zh":"这个示例构建了一个全屏力导布局图查看器，并始终显示一个缩略图覆盖层。画布被有意设计得相当繁忙：一百多个节点散布在深色的点状背景上，节点的大小和形状各不相同，而缩略图始终覆盖在图之上，因此用户在导航时也能持续掌握整体结构。"},{"name":"节点拖拽碰撞与投放规则","name_en":"Node Drag Collision and Drop Rules","path":"node-drag-collision-drop-rules","meta":{"vip":true},"desc_en":"This example shows a compact drag-rule workspace where node overlap is interpreted as an allowed drop, a rejected drop, or a protected collision. It combines fixed-layout graph data, drag lifecycle callbacks, inline node policy toggles, and release-time line creation to demonstrate collision-aware authoring without a full editor shell.","desc_zh":"这个示例展示一个紧凑拖拽规则工作区：节点重叠可被解释为允许投放、拒绝投放或受保护碰撞。它结合固定布局图数据、拖拽生命周期回调、节点内联策略开关，以及释放时创建连线，演示了无需完整编辑器壳层的碰撞感知创作流程。"},{"name":"节点局部拖拽手柄","name_en":"Partial Node Drag Handles","path":"partial-node-drag-handles","meta":{"vip":true},"desc_en":"This example loads a fixed-layout graph, disables whole-node dragging, and restores movement only from slotted subregi

1ons marked with `rg-node-drag-handler`. It mixes header-strip and move-button handle variants through node metadata, while a shared floating helper panel exposes wheel mode, canvas drag mode, and image export.","desc_zh":"这个示例加载固定布局图，禁用整节点拖拽，仅允许从带 `rg-node-drag-handler` 标记的插槽子区域拖动。它通过节点元数据混合“标题条拖拽”和“移动按钮拖拽”两种手柄样式，并在共享悬浮辅助面板中提供滚轮模式、画布拖拽模式和图片导出。"},{"name":"图谱撤销重做与历史记录","name_en":"Graph Undo/Redo History","path":"graph-undo-redo-history","meta":{"vip":true},"desc_en":"This example shows a compact editable relation-graph canvas with snapshot-based undo, redo, and direct history jumping. It captures graph state after supported edits, exposes both keyboard shortcuts and floating history controls, and restores older versions by rebuilding nodes and lines from serialized graph JSON.","desc_zh":"这个示例展示一个紧凑可编辑 relation-graph 画布，支持基于快照的撤销、重做和历史跳转。它会在支持的编辑后记录图状态，提供键盘快捷键和悬浮历史控件，并通过序列化图 JSON 重建节点与连线以恢复旧版本。"},{"name":"手绘线条生成图谱节点","name_en":"Freehand Strokes to Graph Nodes","path":"freehand-strokes-to-graph-nodes","meta":{"vip":true},"desc_en":"This example overlays a freehand drawing canvas on top of relation-graph and converts each finished stroke into a new editable graph node. It demonstrates zoom-aware stroke normalization, custom node rendering for stored SVG path data, and selection-based resize and delete workflows after insertion.","desc_zh":"这个示例在 relation-graph 上叠加手绘画布，并将每条完成的笔画转换为新的可编辑图节点。它演示了与缩放联动的笔画归一化、用于存储 SVG 路径数据的自定义节点渲染，以及插入后的基于选中态缩放与删除流程。"},{"name":"指标汇总关系图编辑器","name_en":"Metric Rollup Graph Editor","path":"metric-rollup-graph-editor","desc_en":"This example builds a compact graph editor for value and summary nodes where users can create nodes and links, edit numbers inline, and recalculate rollup totals from incoming relationships. It combines slot-based node rendering, guided authoring tools, optional tree relayout, and a shared settings or export window on one dotted full-screen canvas.","desc_zh":"这个示例构建了一个紧凑图编辑器，面向数值节点与汇总节点：可创建节点和连线、内联编辑数字，并根据入向关系重算汇总值。它在同一张点状全屏画布上结合插槽节点渲染、引导式创作工具、可选树重布局，以及共享设置/导出窗口。"},{"name":"图形编辑工作台","name_en":"Diagram Editor Workbench","path":"diagram-editor-workbench","meta":{"vip":true,"entVip":true},"desc_en":"This example turns relation-graph into a full diagram editor workbench with creation tools, contextual node and line editing, grouping, container nodes, layout switching, and local history. It is a strong reference for teams that need one integrated editing shell rather than a narrow single-feature demo.","desc_zh":"这个示例把 relation-graph 打造成完整图形编辑工作台，包含创建工具、上下文节点/连线编辑、分组、容器节点、布局切换和本地历史。它非常适合作为需要“一体化编辑壳层”的团队参考，而非单功能窄示例。"},{"name_en":"Connect Targets Across Canvas Elements, Nodes, and Grid Items","name":"画布元素、节点与网格项连接目标","path":"connect-targets-across-canvas-node-and-grid","desc_en":"This example builds a fixed-layout playground where RGConnectTarget is attached to canvas widgets, whole nodes, internal node ports, and a reflowing grid of DOM cards in the same scene. It seeds representative fake lines, intercepts user-created connections with onLineBeCreated, and shows a toast instead of persisting new lines automatically.","desc_zh":"本示例构建的是一个固定布局的 connect-target 练习场，而不是一个面向特定业务领域的图。这个场景在同一个 `RelationGraph` 实例中混合了两个独立的画布组件、两个已定位的图节点、节点内部端口，以及一组可连接的网格卡片。"},{"name_en":"Element Lines","name":"HTML元素连线","path":"element-lines","desc_en":"This example renders a list of interest-group cards and a map of matching markers inside `RGSlotOnCanvas`, then redraws one animated fake line between the selected pair. It is a focused reference for connecting ordinary HTML elements with relation-graph rather than connecting graph nodes.","desc_zh":"这个示例在 `RGSlotOnCanvas` 中渲染兴趣小组卡片列表和地图标记，并在选中配对之间重绘一条动画假连线。它是“用 relation-graph 连接普通 HTML 元素”而非“连接图节点”的聚焦参考。"},{"name_en":"Compare Element-to-Node and Element-to-Element Links","name":"对比元素到节点与元素到元素连线","path":"compare-element-to-node-and-element-to-element-links","desc_en":"This example compares two connector destinations for the same selected DOM list item. One fake line terminates on a real relation-graph node and the other terminates on a plain HTML marker, using the same coordinates and selection flow across both panels.","desc_zh":"这个示例在单个 relation-graph canvas 内构建了一个三栏对比面板。左侧面板将位置标记显示为叠加在地图上的真实图节点，中间面板显示可选择的兴趣小组卡片，右侧面板则将相同的位置显示为普通 HTML 标记。当用户选中某个小组时，示例会从同一个列表项重新绘制两条带动画的连接线：一条连到左侧的图节点，另一条连到右侧的 HTML 标记。"},{"name_en":"Connect List Items to Location Nodes","name":"连接列表项与地点节点","path":"connect-list-items-to-location-nodes","desc_en":"This example connects a list of interest groups to fixed-position location nodes on a 

1school map. It uses RGConnectTarget on the list side, real graph nodes on the map side, and one animated fake line that is replaced whenever the active group changes.","desc_zh":"这个示例在校园地图之上构建了一个位置分配视图。画布左侧显示固定位置的地图图钉，右侧显示六张兴趣小组卡片。系统始终使用一条带动画的连接线来高亮当前选中的列表项与其匹配地图位置之间的关系。"},{"name_en":"Connect Lines to Node Content Targets","name":"节点内容目标点连线","path":"connect-lines-to-node-content-targets","desc_en":"This example renders four fixed-position table panels and connects them with curved fake lines that terminate on specific headers or cells inside the node content. It uses RGSlotOnNode, RGConnectTarget, and mount-time graph initialization to demonstrate precise endpoint placement inside custom node bodies.","desc_zh":"这个示例构建了一个由四个矩形面板组成的小型固定位置关系视图。每个面板都不是使用默认图节点来渲染，而是使用自定义表格标记进行渲染；可见连接线也不是落在节点外边框上，而是落在这些表格内部的特定表头或单元格上。"},{"name_en":"Jin Yong Martial Sect Map Browser","name":"金庸武侠门派地图联动浏览","path":"jin-yong-sect-map-browser","meta":{"isNew":true},"desc_en":"This example overlays fixed-position martial-sect pins on a bundled China SVG and connects a selected sidebar card to one or many pins with fake lines. The same selection state also drives a detail panel, making it a reference for map-backed master-detail browsing rather than geographic analysis or graph editing.","desc_zh":"这个示例在内置中国 SVG 地图上叠加固定位置的门派标记点，并用假连线把侧边栏选中的卡片连接到一个或多个标记。相同的选中状态还会驱动详情面板，因此它更适合作为地图底图下的主从联动浏览参考，而非地理分析或图编辑示例。"},{"name_en":"World Map Graph Overlay with Snapshots","name":"世界地图关系图叠加与快照","path":"world-map-graph-overlay-snapshots","meta":{"vip":true,"isNew":true},"desc_en":"A fixed-layout relation-graph example that overlays authored node coordinates and animated links on a bundled world SVG. It also adds a draggable utility window for snapshot save and replay, shared canvas settings, and image export.","desc_zh":"这是一个固定布局 relation-graph 示例，在内置世界 SVG 上叠加手工节点坐标和动画连线。它还加入可拖拽工具窗，用于快照保存与回放，并提供共享画布设置与图片导出。"},{"name_en":"US Map Graph Overlay and Snapshots","name":"美国地图关系图叠加与快照","path":"us-map-graph-overlay-snapshots","meta":{"vip":true,"isNew":true},"desc_en":"This example overlays a small fixed-layout relation graph on a bundled SVG map of the United States. It saves live graph snapshots from the current node and link state, replays them from a floating panel, and exposes shared canvas settings and image export controls.","desc_zh":"这个示例在内置美国 SVG 地图上叠加一个小型固定布局关系图。它可从当前节点与连线状态保存实时快照，并在悬浮面板中回放，同时提供共享画布设置与图片导出控制。"},{"name":"分步追加图谱数据","name_en":"Append Graph Data in Stages","path":"append-graph-data-in-stages","videoImage":true,"meta":{"vip":true},"desc_en":"This example initializes a centered relation-graph view with one inline dataset and then grows it by appending two more `RGJsonData` fragments through gated overlay buttons. It also reuses a draggable helper window for runtime canvas settings and image export, making it a focused reference for deterministic multi-step graph reveal flows.","desc_zh":"这个示例渲染了一个居中的关系图谱：它从一个中心节点和一小组已连接节点开始。一个浮动辅助窗口允许用户在不替换当前已显示图谱的前提下，继续追加第二层数据，再追加第三层数据。"},{"name":"展开节点时按需加载子节点","name_en":"Lazy Load Tree Children on Expand","path":"lazy-load-tree-children-on-expand","videoImage":true,"meta":{"vip":true},"desc_en":"A top-down tree demo that lazy-loads child nodes when a collapsed branch expands. It appends the returned graph fragment into the live relation-graph instance, reruns layout, and shows both page-level and node-level loading feedback.","desc_zh":"这是一个自上而下树图示例：在折叠分支展开时按需懒加载子节点。它把返回的图数据片段追加到实时 relation-graph 实例中，重新执行布局，并同时展示页面级与节点级加载反馈。"},{"name_en":"Managed Tree Branch Growth with Reapply","name":"外部管理树数据的增支与重应用","path":"managed-tree-branch-growth-reapply","meta":{"vip":true},"desc_en":"This example shows how to keep a nested tree outside relation-graph, grow branches through inline plus-button placeholders, flatten the updated tree, and reapply it after each edit. It is a focused reference for guided branch creation on app-managed data, with automatic relayout, viewport fitting, and shared canvas settings and export helpers.","desc_zh":"这个示例展示如何在 relation-graph 外部维护嵌套树数据：通过内联加号占位节点扩展分支，扁平化更新后的树，并在每次编辑后重新应用。它是基于应用侧数据管理的引导式分支创建参考，包含自动重布局、视口适配，以及共享画布设置

1和导出工具。"},{"name":"叶子节点展开按钮与子节点按需加载","name_en":"Leaf Expand Buttons with Lazy Child Loading","path":"leaf-expand-button-lazy-loading","meta":{"vip":true},"desc_en":"A relation-graph demo that shows how leaf nodes can display built-in expand buttons before they have children. Expanding those placeholders triggers a one-shot simulated async load, appends new nodes and lines with the graph instance API, and reruns tree layout so the new branch settles into place.","desc_zh":"这是一个 relation-graph 示例，展示叶子节点在尚无子节点时也可显示内置展开按钮。点击展开会触发一次性模拟异步加载，通过图实例 API 追加新节点与连线，并重跑树布局让新分支归位。","videoImage":true},{"name":"右键菜单编辑节点与连线","name_en":"Context-menu Node and Line Editing","path":"context-menu-node-and-line-editing","meta":{"vip":true},"desc_en":"This example turns relation-graph\'s right-click event into a compact editing workflow for adding nodes, starting new lines from existing nodes, and deleting targeted objects. It uses a view-layer menu overlay, coordinate conversion for canvas insertion, runtime graph mutation APIs, manual relayout, and shared canvas settings or image export utilities.","desc_zh":"这个示例在一个全屏白色工作区中构建了一张小型树形图，并在其上添加了一个自定义右键菜单。用户可以在空白画布区域右键以添加节点，在现有节点上右键以开始创建新的连线，也可以在节点或连线上右键以删除该特定对象。一个浮动辅助窗口会一直可用，用于重新布局、调整画布设置以及导出图片。"},{"name":"多个关系网","name_en":"Multiple Relationship Networks","path":"multi-group","desc_en":"This example loads one static RGJsonData payload that contains several disconnected relationship groups plus two isolated nodes into a single RelationGraph canvas. It automatically centers and fits the scene on mount, making it a compact reference for fragmented graph data displayed without extra relayout or editing logic.","desc_zh":"这个示例把一份包含多个不连通关系组和两个孤立节点的静态 RGJsonData，加载到同一 RelationGraph 画布。它在挂载时自动居中并适配视图，是“碎片化图数据无额外重布局或编辑逻辑展示”的紧凑参考。"},{"name":"多个独立子系统关系网","name_en":"Multiple Disconnected Subsystem Networks","path":"multiple-disconnected-subsystem-networks","desc_en":"This example loads one inline `RGJsonData` payload that contains several disconnected clusters and two isolated nodes into a single relation-graph canvas. It uses `RGHooks.useGraphInstance()` for mount-time `setJsonData(...)`, then centers and fits the viewport while applying tree layout, curved gray lines, and on-path labels to keep fragmented data readable.","desc_zh":"这个示例将一份包含多个不连通簇和两个孤立节点的内联 `RGJsonData` 加载到同一 relation-graph 画布。它使用 `RGHooks.useGraphInstance()` 在挂载时调用 `setJsonData(...)`，并执行居中与视口适配，同时应用树布局、灰色曲线连线和路径贴合标签以提升碎片化数据可读性。"},{"name":"分离关系组自动重布局","name_en":"Disconnected Multi-Group Force Relayout","path":"disconnected-multi-group-force-relayout","desc_en":"A full-height viewer that loads several disconnected relationship groups and isolated nodes into one canvas, centers the overview, and then switches the same graph to a force layout after a short delay. It is a focused reference for staged first-frame presentation plus post-load separation of fragmented clusters with minimal styling and no custom control panel.","desc_zh":"这是一个全高查看器：先将多个不连通关系组和孤立节点加载到同一画布并居中总览，再在短暂延时后切换为力导布局。它是“首帧稳定展示 + 加载后分离碎片簇”的聚焦参考，样式极简且无自定义控制面板。"},{"name":"孤点或者没有关系的节点","name_en":"Isolated Nodes","path":"show-single-nodes","desc_en":"This example shows how to keep visually isolated nodes inside a relation-graph `circle` layout without drawing extra visible relationships. It starts from a small inline `RGJsonData` payload, derives a root from the first node, adds hidden helper edges with `opacity: 0`, and then loads, centers, and fits the graph on mount.","desc_zh":"这个示例展示如何在 relation-graph 的 `circle` 布局中保留视觉上孤立的节点ï¼

1Œè€Œä¸ç»˜åˆ¶é¢å¤–可见关系。它从小型内联 `RGJsonData` 出发，以首节点推导根节点，添加 `opacity: 0` 的隐藏辅助边，再在挂载时加载、居中并适配图谱。"},{"name":"力导向布局中通过隐藏辅助线保留孤点","name_en":"Force Layout Isolated Nodes with Hidden Helper Lines","path":"force-layout-isolated-nodes-with-hidden-helper-lines","desc_en":"This example shows how to keep isolated or otherwise disconnected nodes present in a relation-graph force layout. It derives a root from the first node, adds hidden helper lines before loading, and then centers and fits the resulting graph in a full-height viewer.","desc_zh":"这个示例展示如何在 relation-graph 力导布局中保留孤立或其他不连通节点。它从首节点推导根节点，在加载前添加隐藏辅助连线，然后在全高查看器中居中并适配结果图。"},{"name":"圆形布局中通过隐藏辅助线保留孤点并设置绿色直线","name_en":"Circle Layout Isolated Nodes with Green Straight Links","path":"circle-layout-isolated-nodes-with-green-straight-links","desc_en":"This example shows how to keep isolated-looking nodes visible in a relation-graph `circle` layout by deriving a root from the first node and injecting hidden helper edges before load. It also makes visible link styling part of the lesson by using straight green default lines, then centers and fits the graph automatically on mount.","desc_zh":"该示例构建了一个全高度的 relation-graph 查看器，将一组稀疏数据放入单一的圆形排列中。最终可见的结果是：一圈 60 x 60 的圆形节点、少量绿色直线连接，以及许多看起来彼此断开的节点ï¼

1Œå°½ç®¡å®ƒä»¬ä»ç„¶å‚与了已加载的图。核心要点在于把两个小技巧结合起来：先在加载前注入隐藏的结构性连线，再使用图选项让可见连线看起来是有意设计的，而无需添加自定义渲染。"},{"name":"直接用层级数据加载树图","name_en":"Load Tree from Hierarchical Data","path":"load-tree-from-hierarchical-data","desc_en":"This example shows how to pass a nested hierarchical RGJsonData object directly into relation-graph and render it as a left-to-right tree without manually authoring line records. It also demonstrates the standard provider-scoped initialization flow, plus shared viewer utilities for canvas mode changes and image export.","desc_zh":"这个示例展示如何将嵌套层级 RGJsonData 直接传入 relation-graph，并渲染为左到右树图，无需手动编写连线记录。它也演示了标准的 provider 作用域初始化流程，以及用于画布模式切换和图片导出的共享查看器工具。"},{"name":"视图与画布插槽总览","name_en":"View and Canvas Slot Overview","path":"view-and-canvas-slots-overview","desc_en":"This example compares three built-in relation-graph slot surfaces inside one graph: `RGSlotOnView`, `RGSlotOnCanvasAbove`, and `RGSlotOnCanvas`. It uses a shared React state value, a view-slot text input, and a canvas-above toggle to show how ordinary HTML can stay interactive while being placed on different graph layers.","desc_zh":"这个示例在一张图中对比 relation-graph 的三种内置插槽层：`RGSlotOnView`、`RGSlotOnCanvasAbove` 和 `RGSlotOnCanvas`。它使用共享 React 状态、视图插槽文本输入和 canvas-above 开关，展示普通 HTML 在不同图层上的放置方式及可交互性。"},{"name":"内置工具栏位置与主题切换","name_en":"Built-in Toolbar Position and Theme Switching","path":"built-in-toolbar-position-and-theme","desc_en":"This example keeps relation-graph\'s built-in toolbar visible on a minimal one-node graph and lets users switch its direction, horizontal alignment, vertical alignment, and three CSS themes from a floating control window. It uses `updateOptions(...)` for live placement changes and wrapper-class SCSS overrides for `.rg-toolbar`, while the shared helper window also provides canvas settings and image export.","desc_zh":"这个示例构建了一个全高的关系图查看器，其核心关注点是 relation-graph 的内置工具栏，而不是图数据本身。画布加载了一个单节点，保持默认工具栏可见，并在图上方放置了一个浮动的白色控制窗口。"},{"name":"自定义工具栏按钮","name_en":"Customize Toolbar Buttons","path":"toolbar-buttons","meta":{"vip":true,"isNew":true},"desc_en":"This example shows how to disable relation-graph\'s built-in toolbar and replace it with custom controls mounted through `RGSlotOnView`. It combines `RGToolBar`, two `RGMiniToolBar` variants, shared React state for mirrored favorite buttons, and a toggleable `RGMiniView` with light SCSS styling.","desc_zh":"这个示例展示如何关闭 relation-graph 内置工具栏，并通过 `RGSlotOnView` 挂载自定义控制。它结合 `RGToolBar`、两种 `RGMiniToolBar` 变体、用于镜像收藏按钮的共享 React 状态，以及可切换的 `RGMiniView` 和轻量 SCSS 样式。"},{"name":"自定义工具栏与跨层提示框","name_en":"Custom Toolbar and Cross-Layer Tooltips","path":"custom-toolbar-and-cross-layer-tooltips","meta":{"vip":true,"isNew":true},"desc_en":"This example shows how to disable relation-graph\'s built-in toolbar and replace it with a custom floating toolbar inside `RGSlotOnView`. It also demonstrates one hover system that spans toolbar buttons, view-slot anchors, canvas-slot anchors, node-slot content, and graph-rendered nodes or lines through recursive tooltip discovery and graph hit-testing.","desc_zh":"这个示例展示如何关闭 relation-graph 内置工具栏，并在 `RGSlotOnView` 中放置自定义悬浮工具栏。它还演示了跨层悬浮提示系统：覆盖工具栏按钮、view 插槽锚点、canvas 插槽锚点、èŠ

1‚点插槽内容以及图渲染的节点/连线，依靠递归 tooltip 发现与图命中检测实现。"},{"name":"节点展开按钮插槽自定义","name_en":"Custom Node Expand Button Slot","path":"custom-node-expand-button-slot","videoImage":true,"meta":{"vip":true},"desc_en":"This example shows how to replace relation-graph\'s default expand or collapse control with a custom slot-rendered badge attached to each node. It loads a local hierarchy, collapses one branch on startup, and uses the slot-provided toggle callback to support both click and touch interaction.","desc_zh":"这个示例展示如何用附着在节点上的自定义插槽徽章，替换 relation-graph 默认展开/收起控件。它加载本地层级数据，在启动时先折叠一个分支，并通过插槽提供的切换回调同时支持点击与触摸交互。"},{"name":"运行时图谱控制","name_en":"Runtime Graph Controls","path":"runtime-graph-controls","videoImage":true,"meta":{"vip":true},"desc_en":"This example shows a force-layout people relationship graph controlled from a floating utility window. It demonstrates how external UI can call relation-graph instance APIs to focus nodes, animate movement, mutate node state, add followers at runtime, switch canvas behavior, and export the graph as an image.","desc_zh":"这个示例展示一个由悬浮工具窗控制的力导人物关系图。它演示外部 UI 如何调用 relation-graph 实例 API：聚焦节点、动画移动、修改节点状态、运行时新增关注者、切换画布行为并导出图谱图片。"},{"name":"搜索节点并定位视图","name_en":"Search Node and Focus Viewport","path":"search-and-focus","videoImage":true,"meta":{"vip":true},"desc_en":"This example builds a people-relationship viewer with a floating search panel that derives selectable names from the loaded graph and focuses the viewport on the chosen node. It loads static RGJsonData asynchronously, renders avatar nodes and labeled straight multi-links, and combines `focusNodeById(...)` with shared canvas settings and image export controls.","desc_zh":"这个示例构建人物关系查看器，带悬浮搜索面板，可从已加载图中提取可选姓名并将视口聚焦到选中节点。它异步加载静态 RGJsonData，渲染头像节点和带标签的直线多重连线，并结合 `focusNodeById(...)` 与共享画布设置和图片导出控制。"},{"name":"节点悬停详情提示框","name_en":"Node Hover Detail Tooltip","path":"node-hover-tooltip","desc_en":"This example shows how to open a non-interactive node detail tooltip from a custom `RGSlotOnNode` renderer and render the card inside `RGSlotOnView`. It uses wrapper-relative pointer coordinates, hover enter and leave handlers, and inline icon-node data to keep the graph read-only while still exposing node metadata.","desc_zh":"这个示例展示如何在自定义 `RGSlotOnNode` 渲染器中，于节点悬停时打开不可交互的详情提示卡，并在 `RGSlotOnView` 中渲染。它使用相对容器的指针坐标、悬停进入/离开处理，以及内联图标节点数据，在保持图谱只读的同时暴露节点元信息。"},{"name":"节点与连线提示框及右键菜单","name_en":"Node and Line Tooltips with Context Menu","path":"node-line-tooltips-and-context-menu","meta":{"vip":true},"desc_en":"This example shows how to attach custom hover tooltips and right-click menus to both nodes and lines in a relation-graph viewer. It uses graph hit-testing, view-relative overlay positioning, and slot-based rendering to keep those panels aligned inside the graph surface. A shared helper window also exposes canvas settings and image export.","desc_zh":"这个示例展示如何在 relation-graph 查看器中为节点和连线同时挂载自定义悬停提示与右键菜单。它通过图命中检测、相对视图的覆盖层定位和插槽渲染，让这些面板始终对齐在图表面内；共享辅助窗还提供画布设置和图片导出。"},{"name":"自定义全屏目标容器","name_en":"Customize Fullscreen Target Container","path":"fullscreen-target-container","desc_en":"This example shows how to redirect relation-graph\'s built-in fullscreen behavior to a larger wrapper element with `fullscreenElementXPath`. A small left-to-right tree sits between an instructional header and two side panels so the fullscreen boundary is obvious and easy to reuse in broader page layouts.","desc_zh":"这个示例展示如何通过 `fullscreenElementXPath` 将 relation-graph 内置全屏行为重定向到更大的外层容器。一个小型左到右树图位于说明头部与两侧面板之间，使全屏边界清晰可见，便于在更复杂页面布局中复用。"}

1,{"name":"节点、连线与画布右键菜单","name_en":"Node, Line, and Canvas Context Menu","path":"node-line-canvas-context-menu","desc_en":"This example shows how one relation-graph `onContextmenu` handler can open a floating menu for nodes, lines, and empty canvas. It combines `RGSlotOnView` for the overlay, `RGSlotOnNode` for icon-only circular nodes, and a lazily mounted global toast layer to confirm placeholder actions without mutating the graph.","desc_zh":"这个示例展示如何通过一个 relation-graph `onContextmenu` 处理器，为节点、连线和空白画布统一弹出悬浮菜单。它使用 `RGSlotOnView` 渲染覆盖层、`RGSlotOnNode` 渲染仅图标圆形节点，并懒加载全局 toast 层来确认占位动作而不修改图数据。"},{"name":"使用插槽实现节点上下文菜单","name_en":"Node Context Menu via Slots","path":"node-context-menu-via-slots","desc_en":"A compact relation-graph example that opens a node action menu from custom slotted node DOM and renders that overlay through `RGSlotOnView`. It demonstrates pointer-relative menu positioning, native context-menu suppression, click-away dismissal, and shared success feedback without turning the graph into an editor.","desc_zh":"这是一个紧凑 relation-graph 示例：从自定义插槽节点 DOM 打开节点操作菜单，并通过 `RGSlotOnView` 渲染覆盖层。它演示相对指针定位、原生右键菜单抑制、点击外部关闭，以及在不把图变成编辑器的前提下提供统一成功反馈。"},{"name":"画布交互事件","name_en":"Canvas Interaction Events","path":"canvas-interaction-events","desc_en":"A full-screen relation-graph demo that turns canvas click and drag callbacks into visible UI. It loads a small inline graph, clears checked state from `onCanvasClick`, converts drag-start browser coordinates into graph-view coordinates for a temporary arrow overlay, and reuses a floating settings panel for runtime mode switching and image export.","desc_zh":"本示例构建了一个全高的 relation-graph 查看器，并把画布本身作为主要关注对象。图数据刻意保持很小，但页面额外加入了一个可拖拽的辅助窗口、固定的 toast 提示、内置工具栏，以及用户拖动画布时出现的临时红色箭头叠加层。"},{"name":"画布框选与节点创建","name_en":"Canvas Selection and Node Creation","path":"canvas-selection-node-creation","desc_en":"This example shows how one relation-graph canvas selection gesture can either select enclosed nodes or create a new circle or rectangle node. It also exposes the live selection bounds in a floating helper window and lets users switch canvas drag behavior at runtime.","desc_zh":"这个示例构建了一个全屏的 relation-graph 工作区，并预置了 14 个彼此断开的字母节点。一个可拖拽的辅助窗口始终位于画布上方，用来说明如何开始框选、显示实时的选择框尺寸信息，并提供可切换项来改变拖拽手势的行为。"},{"name":"框选创建或选择节点","name_en":"Create or Select Nodes by Drag Selection","path":"selection-create-or-select-nodes","desc_en":"This example shows how one selection gesture can either create a circle or rectangle node or select existing nodes, depending on the armed mode. It combines `onCanvasSelectionEnd` with keyboard and palette arming, live selection HUD feedback, a dashed preview overlay, and a shared floating settings panel.","desc_zh":"这个示例展示同一次框选手势可根据当前模式实现“创建圆形/矩形节点”或“选择已有节点”。它结合 `onCanvasSelectionEnd` 与键盘/面板模式启用、实时选区 HUD 反馈、虚线预览覆盖层，以及共享悬浮设置面板。"},{"name":"节点与连线点击高亮","name_en":"Node and Line Click Highlighting","path":"node-line-click-highlighting","videoImage":true,"meta":{"vip":true},"desc_en":"This example builds a read-only people relationship map where node clicks highlight connected lines, line clicks isolate the selected relation\'s endpoints, and canvas clicks restore the baseline styles. It is a focused reference for reversible interaction-driven graph styling with portrait node slots, saved original styles, and a force layout that settles before inspection begins.","desc_zh":"这个示例构建只读人物关系图：点击节点高亮关联连线，点击连线只保留该关系的两端节点，点击画布恢复基线样式。它是可逆的交互驱动样式控制参考，包含人像节点插槽、原始样式保存，以及在检查前先稳定收敛的力导布局。"},{"name_en":"Highlight Related Lines on Node Hover","name":"节点悬停高亮关联线条","path":"highlight-related-lines-on-node-hover","meta":{"vip":true,"isNew":true},"desc_en":"This example renders a top-down tree and highlights only the hovered node together with its directly connected lines. It demonstrates `RGSlotOnNode` hover handlers, runtime neighbor lookup through `getLines()`, temporary node and line class updates, animated line styling in SCSS, and a shared floating utility panel for canvas settings and image export.","desc_zh":"这个示例渲染一棵自上而下树图，仅高亮悬停节点及其直接连接连线ã€

1‚它演示 `RGSlotOnNode` 悬停事件、通过 `getLines()` 进行运行时邻接查询、临时节点与连线 class 更新、SCSS 动画线样式，以及共享悬浮工具面板的画布设置与图片导出。"},{"name_en":"Highlight Line and Endpoints on Click","name":"点击线条高亮线条及端点节点","path":"highlight-line-and-endpoints-on-click","meta":{"vip":true,"isNew":true},"desc_en":"This example shows a top-down tree where clicking a relation line highlights that line and its two endpoint nodes. It uses relation-graph instance APIs to reset previous state, apply temporary classes at runtime, and clear the emphasis again when the canvas background is clicked.","desc_zh":"这个示例展示一棵自上而下树图：点击关系线可高亮该线及其两个端点节点。它使用 relation-graph 实例 API 重置上次状态、运行时应用临时 class，并在点击画布背景时清除高亮。"},{"name":"节点后代子树高亮","name_en":"Node Descendant Subtree Highlight","path":"node-descendant-subtree-highlight","videoImage":true,"desc_en":"This example loads a static hierarchy into a centered relation-graph view and highlights the clicked node together with all of its descendants. It demonstrates recursive traversal through runtime node objects, batch node and line updates, canvas-based reset, and a shared floating utility panel for settings and image export.","desc_zh":"这个示例将静态层级数据加载到居中的 relation-graph 视图，并在点击节点时高亮该节点及其所有后代。它演示了基于运行时节点对象的递归遍历、批量节点与连线更新、画布重置，以及共享悬浮设置与图片导出面板。"},{"name":"监听图谱大小变化","name_en":"Graph Resize Event","path":"graph-resize","videoImage":true,"desc_en":"This example shows how to keep a relation-graph view centered and fitted when its host container changes size. A selector drives the square wrapper dimensions, and the graph responds through `onViewResize` by calling `moveToCenter()` and `zoomToFit()` on the existing instance.","desc_zh":"这个示例展示当宿主容器尺寸变化时，如何保持 relation-graph 视图居中并自适应。选择器驱动方形包裹层尺寸变化，图通过 `onViewResize` 调用现有实例的 `moveToCenter()` 和 `zoomToFit()` 进行响应。"},{"name":"图谱缩放预设","name_en":"Graph Zoom Presets","path":"graph-zoom-presets","videoImage":true,"desc_en":"This example loads an inline top-down tree into relation-graph and controls the viewport through five fixed zoom presets in a floating helper window. It initializes the graph with `setJsonData()`, `moveToCenter()`, and `setZoom()`, then keeps later preset changes synchronized from React state while still exposing shared canvas settings and image export utilities.","desc_zh":"这个示例把内联自上而下树图加载到 relation-graph，并通过悬浮辅助窗中的 5 个固定缩放预设控制视口。它用 `setJsonData()`、`moveToCenter()` 和 `setZoom()` 初始化图谱，后续预设变更由 React 状态同步，同时保留共享画布设置与图片导出工具。"},{"name":"根节点左右分支显隐切换","name_en":"Root-Side Branch Visibility Toggles","path":"root-side-branch-visibility-toggles","videoImage":true,"desc_en":"This example renders a root-centered bidirectional tree where the root node exposes separate left and right toggle buttons. Each button hides or reveals one side of the hierarchy by filtering related nodes with `lot.level`, while shared demo utilities provide canvas settings and image export.","desc_zh":"这个示例渲染以根为中心的双向树，根节点提供左右两侧独立切换按钮。每个按钮通过筛选 `lot.level` 相关节点来隐藏或显示一侧层级，并复用共享示例工具提供画布设置和图片导出。"},{"name":"默认折叠的可展开树图","name_en":"Initially Collapsed Expandable Tree","path":"initially-collapsed-tree","videoImage":true,"desc_en":"This example shows how to load a complete tree, collapse selected branches immediately after `setJsonData()`, and reveal them later through node clicks. It is a focused reference for progressive disclosure on a preloaded hierarchy, with automatic relayout and shared canvas settings and export helpers.","desc_zh":"这个示例展示如何在 `setJsonData()` 后立即折叠指定分支，并通过后续节点点击逐步展开。它是预加载层级上的渐进披露参考，包含自动重布局及共享画布设置与导出工具。"},{"name":"整图展开/折叠回放","name_en":"Whole-Graph Expand/Collapse Playback","path":"whole-graph-expand-collapse-playback","videoImage":true,"meta":{"vip":true},"desc_en":"A relation-graph demo for replaying whole-graph expand and collapse sequences over a fixed centered hierarchy. It loads one inline 39-node dataset, auto-fits the graph, auto-runs expand playback on mount, exposes global `Expand All` and `Collapse All` controls in a draggable helper window, and inherits secondary canvas settings plus image export utilities from a shared helper.","desc_zh":"这是一个 relation-graph 示例，用于在固定居中层级图上回放整图展开/收缩序列。它加载一份内联 39 节点数据，自动适配视图并在挂载后自动播放展开过程，在可拖拽辅助窗中提供全局 `E

1xpand All` 与 `Collapse All`，并继承共享画布设置与图片导出能力。"},{"name":"依次展开图谱","name_en":"Depth-First Tree Expansion Playback","path":"expand-graph-step-by-step","meta":{"vip":true},"desc_en":"A relation-graph demo that loads an inline subsystem tree, collapses every expandable branch, and then replays expansion automatically from the root. It combines recursive `expandNode(...)` calls, timed pauses, canvas animation, and repeated viewport fitting so the reveal behaves like guided playback instead of manual disclosure.","desc_zh":"这是一个 relation-graph 示例：加载内联系统树后先折叠所有可展开分支，再从根节点自动回放展开。它结合递归 `expandNode(...)`、定时停顿、画布动画和重复视口适配，使呈现更像引导式播放而非手动披露。"},{"name":"按指定层级展开树图","name_en":"Expand Tree to Selected Level","path":"expand-tree-to-selected-level","videoImage":true,"meta":{"vip":true},"desc_en":"This example loads a fixed subsystem hierarchy into a left-to-right tree and lets the user switch the visible disclosure depth from a floating preset selector. It is a focused reference for using computed `node.lot.level` values with `updateNode()`, `doLayout()`, and viewport refit calls to reset expansion state across the whole graph.","desc_zh":"这个示例将固定子系统层级加载为左到右树图，并允许用户通过悬浮预设选择器切换可见展开深度。它是使用计算得到的 `node.lot.level` 配合 `updateNode()`、`doLayout()` 与视口重适配来全局重置展开状态的聚焦参考。"},{"name":"按节点ID聚焦视图","name_en":"Focus Viewport by Node ID","path":"focus-viewport-by-node-id","videoImage":true,"meta":{"vip":true},"desc_en":"This example builds a large node-only relation-graph canvas and drives viewport navigation from a fixed list of node IDs in a floating panel. It generates 160 nodes in memory, initializes the graph through instance APIs, wraps `focusNodeById(...)` in temporary canvas animation, and reuses shared controls for canvas settings and image export.","desc_zh":"这个示例构建大型“仅节点”relation-graph 画布，并通过悬浮面板中的节点 ID 列表驱动视口导航。它在内存中生成 160 个节点，使用实例 API 初始化图谱，并在 `focusNodeById(...)` 外包裹临时画布动画，同时复用共享画布设置与图片导出控制。"},{"name":"布局预设自动切换","name_en":"Automatic Layout Preset Switching","path":"automatic-layout-preset-switching","videoImage":true,"meta":{"vip":true},"desc_en":"This example shows how to load one branching graph once and automatically rotate it through the built-in center, tree, circle, and force layouts. A floating helper window provides play-stop control, shared canvas settings, and image export so the page works as a compact layout-comparison workspace.","desc_zh":"这个示例构建了一个全高的 relation-graph 画布，把一份固定的分支型数据集变成一个布局对比界面。同一组节点和连线会分别以 `center`、从左到右的 `tree`、`circle` 和 `force` 布局显示，同时一个小型浮动窗口始终悬浮在画布上方。"},{"name":"连通子图布局与主题切换","name_en":"Connected Component Layout and Theme Switcher","path":"connected-component-layout-and-theme-switcher","videoImage":true,"meta":{"vip":true},"desc_en":"This example loads two disconnected graph datasets into one canvas and lets the user click a node to select its full connected component. The selected component can then switch theme and layout presets without changing the rest of the canvas, and the viewport is adjusted so the active group stays beside the editing overlay.","desc_zh":"这个示例构建了一个全屏图谱工作台，在同一块画布上挂载两组彼此断开的 relation-graph 数据集。用户点击任意节点后，会选中该节点所属的整个连通分量，然后通过一个跟随选区移动的悬浮工具栏，仅切换这个连通分量的主题或布局。图谱覆盖层中始终显示一个 minimap，同时还有一个可拖拽的辅助窗口，用于暴露画布设置

1和导出图片功能。"},{"name":"画布框选多个节点","name_en":"Canvas Multi-Node Selection","path":"canvas-multi-node-selection","videoImage":true,"meta":{"vip":true},"desc_en":"This example shows a fixed relation-graph canvas where users can marquee-select multiple existing nodes, clear selection with a canvas click, and switch canvas dragging between selection and move modes. It also surfaces live selection geometry and a selected-node count in a floating helper window, while reusing shared canvas settings and image export tooling.","desc_zh":"这个示例构建了一个全高度图查看器，用于通过拖拽矩形框选择多个现有节点。用户会看到一个居中的图标式网络、一个悬浮辅助窗口、一个可在框选与移动之间切换画布拖拽行为的模式开关，以及一个用于实时显示当前已选节点数量的计数器。这个示例的重点不是图编辑，而是把 relation-graph 的框选能力转化为一个明确的多节点选择工作流，并为其配套提供周边 UI 反馈。"},{"name":"画布拖拽与滚轮模式切换","name_en":"Canvas Drag and Wheel Modes","path":"canvas-drag-wheel-modes","videoImage":true,"meta":{"vip":true},"desc_en":"A full-height relation-graph workspace demo focused on changing canvas drag and wheel behavior at runtime. It loads a small inline graph, exposes live `wheelEventAction` and `dragEventAction` controls in a draggable floating panel, clears checked state from empty-canvas clicks, and includes an image export flow.","desc_zh":"这个示例构建了一个全高度的 relation-graph 工作区，用来测试画布对拖拽和滚轮输入的响应方式。图本身是刻意保持通用的：一个居中的示例网络、使用云朵图标渲染节点、带有一个浮动的白色工具窗口，并且没有任何会分散注意力的业务领域叠加层。"},{"name":"画布与节点交互限制","name_en":"Canvas and Node Interaction Locks","path":"canvas-node-interaction-locks","desc_en":"This example loads a centered hierarchy into relation-graph with wheel zoom, canvas dragging, and node dragging disabled in the initial options. It then shows how to re-enable those behaviors at runtime through a floating helper window, shared canvas settings controls, and image export utilities.","desc_zh":"这个示例构建了一个全高度的 relation-graph 查看器，并且它在打开时处于受限交互状态。图本身是一个小型的居中层级结构，带有矩形节点和灰色曲线连线，同时画布上方悬浮着一个白色工具窗口。"},{"name":"用画布分区展示图谱","name_en":"Partition Graph with Canvas Zones","path":"partition-graph-with-canvas-zones","desc_en":"A fixed-layout relation graph is divided into three colored canvas zones while each node is rendered as a table-shaped HTML block through a node slot. The example is mainly a read-only viewer, with shared controls for canvas behavior and image export layered on top.","desc_zh":"这个固定布局关系图将画布划分为三个彩色区域，并通过节点插槽把每个节点渲染为表格形 HTML 块。示例主要是只读查看器，上层叠加了画布行为和图片导出的共享控制。"},{"name":"节点邻域分组背景","name_en":"Node Neighborhood Group Background","path":"node-neighborhood-group-background","meta":{"vip":true,"isNew":true},"desc_en":"This example loads a force-directed relation graph, seeds three saved neighborhoods, and lets users click any node to create another neighborhood highlight. Each highlight is drawn as a canvas-layer SVG region derived from live node bounds, using a rectangle for one-node groups and a convex-hull footprint for multi-node groups.","desc_zh":"这个示例加载力导关系图，预置三个邻域分组，并允许用户点击任意节点创建新的邻域高亮。每个高亮都会在画布层绘制为基于实时节点边界的 SVG 区域：单节点组用矩形，多节点组用凸包轮廓。"},{"name":"点击节点高亮关联节点分组","name_en":"Click-Driven Related Node Group Highlights","path":"click-related-node-group-highlights","meta":{"vip":true,"isNew":true},"desc_en":"This example builds a force-layout viewer that outlines a clicked node and its related neighborhood with a canvas-layer rounded rectangle. It seeds three example groups on load, deduplicates repeated selections, and keeps only the newest three overlays visible for comparison.","desc_zh":"这个示例构建了一个力导布局网络查看器，使用持久化的 canvas 层矩形来标记节点邻域。图谱初始会预置三个高亮分组，每个已保存的分组都会围绕一个核心节点以及 relation-graph 返回的相关节点ï¼

1Œç»˜åˆ¶ä¸€ä¸ªåœ†è§’半透明轮廓。"},{"name":"画布中心偏移","name_en":"Canvas Center Offset","path":"canvas-center-offset","desc_en":"This example shows how to recenter a relation-graph canvas from external React controls instead of graph data or layout changes. It mounts a labeled SVG coordinate grid in RGSlotOnCanvas, drives setCanvasCenter(...) from X and Y sliders, and reuses the shared floating settings panel for runtime canvas options and image export.","desc_zh":"这个示例构建的是一个 canvas 定位演示环境，而不是图数据展示案例。页面会渲染一个全高的 `RelationGraph` canvas，在 canvas 图层内挂载一个带有标签的大型 SVG 坐标网格，并在其上方放置一个浮动工具窗口。"},{"name":"布局旋转角度控制","name_en":"Layout Rotation Controls","path":"layout-rotation-controls","meta":{"vip":true},"desc_en":"This example shows how to rotate a mounted relation-graph layout at runtime while switching the same dataset between the built-in center and tree layouts. A floating tool window provides angle controls, layout switching, canvas behavior settings, and image export so the graph can be studied as a small layout-tuning workspace.","desc_zh":"这个示例展示如何在运行时旋转已挂载的 relation-graph 布局，并在同一数据集上切换内置中心布局与树布局。悬浮工具窗提供角度控制、布局切换、画布行为设置和图片导出，使其成为小型布局调优工作区。"},{"name":"切换到图谱标签时初始化","name_en":"Initialize Graph On Tab Reveal","path":"initialize-graph-on-tab-reveal","desc_en":"This example embeds relation-graph inside a three-state page and delays both graph mounting and data initialization until the user opens the Graph tab. It uses `RGHooks.useGraphInstance()` to load a flat inline dataset, generate missing line ids, and immediately center and fit the first visible view.","desc_zh":"这个示例把 relation-graph 嵌入一个三状态页面，并延迟到用户打开 Graph 标签时才进行图挂载与数据初始化。它使用 `RGHooks.useGraphInstance()` 加载扁平内联数据、补全缺失连线 id，并在首次可见后立即执行居中与视口适配。"},{"name":"展开/收缩后是否重新布局（纵向树）","name_en":"Expand/Collapse Relayout Toggle (Top-Down Tree)","path":"top-down-tree-expand-relayout-toggle","videoImage":true,"desc_en":"A relation-graph demo that isolates `reLayoutWhenExpandedOrCollapsed` on a top-down tree. It loads a fixed inline hierarchy, lets users switch between relayout and non-relayout behavior from a draggable floating panel, and inherits secondary canvas settings and image export controls from a shared helper window.","desc_zh":"这是一个 relation-graph 示例，聚焦演示自上而下树图中的 `reLayoutWhenExpandedOrCollapsed`。它加载固定内联层级数据，允许用户在可拖拽悬浮面板中切换“展开/收缩后是否重布局”，并继承共享辅助窗中的画布设置和图片导出控制。"},{"name":"展开/收缩后是否重新布局（中心布局）","name_en":"Expand/Collapse Relayout Toggle (Center Layout)","path":"center-layout-expand-relayout-toggle","videoImage":true,"desc_en":"A relation-graph demo that compares whether built-in expand or collapse should trigger automatic relayout in a center-layout hierarchy. It loads a fixed 39-node inline dataset, exposes a `Re-layout` or `Do not re-layout` selector in a draggable helper window, and inherits secondary canvas settings plus image export controls from a shared helper.","desc_zh":"这个示例构建了一个全高度的居中层级查看器，用来比较用户通过 relation-graph 内置的 expand holder 展开或收起分支后会发生什么。画布展示的是一个以根节点为中心的子系统风格图谱，包含较大的青色圆形节点、蓝绿色连线、沿连线路径重复渲染的 `Subsystem` 标签，以及叠加在图谱上方的白色悬浮辅助窗口。"},{"name":"图谱画布主题切换","name_en":"Graph Canvas Theme Switcher","path":"graph-canvas-theme-switcher","desc_en":"This example renders a small left-to-right tree and switches among three full-canvas visual themes by changing a wrapper class. It shows how to skin relation-graph\'s built-in map, toolbar, nodes, and checked states with SCSS while keeping the same data, layout, and graph instance. A shared floating panel also exposes wheel mode, drag mode, and image export utilities.","desc_zh":"这个示例渲染一棵小型左到右树图，并通过切换容器 class 在三种全画布视觉主题间切换。它展示了如何用 SCSS 给 relation-graph 内置小地图、工具栏、节点和选中态换肤，同时保持同一数据、布局和图实例；共享悬浮面板还提供滚轮模式、拖拽模式和图片导出。"},{"name":"导出完整图谱图片","name_en":"Export Full Graph Image","path":"export-full-gra

1ph-image","meta":{"vip":true},"desc_en":"This example shows how to export the full relation-graph scene as a downloadable image from custom UI controls. It loads a static left-to-right tree, prepares the graph for capture, converts the prepared DOM into a blob with modern-screenshot, and restores graph state after the download flow completes.","desc_zh":"这个示例展示如何通过自定义 UI 将完整 relation-graph 场景导出为可下载图片。它加载静态左到右树图，先准备图谱捕获状态，再用 modern-screenshot 将准备后的 DOM 转为 blob，并在下载流程完成后恢复图状态。"},{"name":"导出图谱Base64图片数据","name_en":"Export Graph Base64 Image Data","path":"export-graph-base64-image-data","meta":{"vip":true},"desc_en":"This example shows how to capture a full relation-graph scene as Base64 image data instead of downloading it immediately. It loads a static graph, prepares the canvas for export, captures it with a shared modern-screenshot helper, converts the blob to a data URL, and previews both the image and the raw string in a floating utility window.","desc_zh":"这个示例展示如何把完整 relation-graph 场景捕获为 Base64 图片数据，而不是立即下载。它加载静态图，准备导出状态，使用共享 modern-screenshot 辅助方法截图，把 blob 转为 data URL，并在悬浮工具窗中同时预览图片与原始字符串。"},{"name":"导出当前可见图谱区域图片","name_en":"Export Visible Graph Area Image","path":"export-visible-graph-area-image","meta":{"vip":true},"desc_en":"This example shows how to capture only the currently visible relation-graph viewport and present the result inline as both an image preview and a Base64 string. It also demonstrates how to temporarily include or exclude the built-in toolbar and minimap from the captured image.","desc_zh":"这个示例展示如何仅捕获 relation-graph 当前可见视口，并以内联图片预览与 Base64 字符串形式展示结果。它还演示了如何在截图中临时包含或排除内置工具栏与小地图。"},{"name":"生成包背景的图片","name_en":"Generate an image with background","path":"generate-image-with-background","meta":{"vip":true},"desc_en":"This example renders a left-to-right relation-graph tree, styles the graph canvas with layered gradients, and captures the prepared scene as an inline preview image. It is a focused reference for background-aware graph export, especially when the generated bitmap needs to stay inside the UI for review before download or reuse.","desc_zh":"这个示例渲染一棵左到右 relation-graph 树图，为画布叠加多层渐变背景，并将准备后的场景捕获为内联预览图片。它是背景感知图谱导出的聚焦参考，适合在下载或复用前先在 UI 内审阅生成位图。"},{"name":"预览带平铺背景的图谱图片","name_en":"Preview Graph Image with Tiled Background","path":"preview-graph-image-with-tiled-background","meta":{"vip":true},"desc_en":"This example renders a left-to-right relation-graph tree over a repeated tiled background and captures the prepared full scene into an inline preview image. It is a focused reference for preview-first graph export when decorative background content should remain part of the generated bitmap.","desc_zh":"这个示例在平铺重复背景上渲染左到右 relation-graph 树图，并把准备后的完整场景捕获为内联预览图片。它是“预览优先”图谱导出的聚焦参考，适用于需要把装饰性背景一并纳入生成位图的场景。"},{"name":"GraphInstance Expand and Collapse API","name_en":"GraphInstance Expand and Collapse API","path":"graph-instance-expand-collapse-api","desc_en":"This example shows how to get a provider-scoped relation-graph instance with `RGHooks.useGraphInstance()`, load a small inline tree, and normalize the viewport after mount. It then demonstrates one focused control pattern: an external button resolves node `b` by id and toggles that branch with `expandNode()` or `collapseNode()`.","desc_zh":"这个示例展示如何用 `RGHooks.useGraphInstance()` 获取 provider 作用域 relation-graph 实例，加载小型内联树图并在挂载后规范化视口。随后演示一个聚焦控制模式：外部按钮按 id 定位节点 `b`，并通过 `expandNode()` / `collapseNode()` 切换该分支。"},{"name":"自定义 GraphInstance 混合布局","name_en":"Custom GraphInstance Mixed Layout","path":"custom-graph-instance-mixed-layout","meta":{"vip":true},"desc_en":"This example replaces the default relation-graph core with a custom `RelationGraphCore` subclass that reads two inline datasets from `graphOptions.data` and composes them into one center-plus-tree scene. It is a focused reference for provider-level graph-core injection, custom `doLayout()` orchestration, and one-canvas mixed-layout composition.","desc_zh":"这个示例用自定义 `RelationGraphCore` 子类替换默认 relation-graph 内核，从 `graphOptions.data` 读取两份内联数据并组合为“中心布局 + 树布局”的同画布场景。它是 provider 级图内核注入、自定义 `doLayout()` 编排和单画布混合布局组合的聚焦参考。"}]');export{e as a,a as u};