# @captiveorigins/onepedigree-react 中文文档

规范地址：https://npmcn.com/package/%40captiveorigins/onepedigree-react/

版本：0\.1\.0-alpha\.13
npm 元数据更新时间：2026-11-09T05:45:48.361Z
中文译文更新时间：2026-11-09T19:04:00.999Z
软件包许可：PolyForm-Noncommercial-1\.0\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40captiveorigins/onepedigree-react
原文对照：https://npmcn.com/package/%40captiveorigins/onepedigree-react/?lang=original
项目主页：https://github.com/CaptiveOrigins/onepedigree#readme
源码仓库：https://github.com/CaptiveOrigins/onepedigree

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：118 kB，29 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22
- 运行依赖：1 个
- peer 依赖：react \>=18\.2
- 首次发布：2026-10-31T19:43:38.594Z
- 最新版本发布：2026-11-09T05:45:47.947Z
- 近 30 天下载量：1821（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：11（近 12 个月 11 个）

## 中文简介

OnePedigree for React:服务器可登陆的 SVG pedigree 视图(全为13),是一个交互式的探索器,无头钩和CSS可变型.

## 安装

```sh
npm install @captiveorigins/onepedigree-react
```

也可以使用：`pnpm add @captiveorigins/onepedigree-react`、`yarn add @captiveorigins/onepedigree-react`、`bun add @captiveorigins/onepedigree-react`

## README

# @ captive 起源/ onepedigre- react

服务器可响应的 SVG pedigree 视图 [`@captiveorigins/onepedigree-core`](https://npmcn.com/package/%40captiveorigins/core)。 。 。 .

```tsx
import { layoutPedigree, projectPedigree } from '@captiveorigins/onepedigree-core'
import { PedigreeExplorer, PedigreeView } from '@captiveorigins/onepedigree-react'
import '@captiveorigins/onepedigree-react/styles.css'

// Static (server component, no client JavaScript; nodes are ordinary links):
export async function AnimalPedigree({ document, focalId }) {
  const projection = projectPedigree(document, { focalId, view: 'pedigree', ancestorDepth: 4, maxNodes: 500 })
  const layout = await layoutPedigree(projection, { orientation: 'vertical' })
  return <PedigreeView projection={projection} layout={layout} getIndividualHref={(a) => `/animals/${a.id}`} />
}

// Interactive (client): pan, zoom, fit, selection, highlighting, keyboard, quick view, SVG/print export.
<PedigreeExplorer projection={projection} layout={layout} height="32rem" />
```

## 视图

所有13个核心观点: `pedigree`, (中文(简体) ), `fan`, (中文(简体) ), `ahnentafel`, (中文(简体) ), `descendants`, (中文(简体) ), `hourglass`, (中文(简体) ), `cohort`, (中文(简体) ), `relationship`, (中文(简体) ), `timeline`, (中文(简体) ), `inbreeding`, (中文(简体) ), `population`, (中文(简体) ), `compact`, (中文(简体) ), `maternal`, (中文(简体) ), `paternal`。重复的个人遵循投影 `merge`, (中文(简体) ), `separate` 或者说 `hybrid` 模式; 选择一个事件,突出该个人的每一起事件.

## 通过拖曳重排

在秩序是一种选择(后人、小时镜、群体、人口、关系)的情况下,人们可以拖出节点的侧面,在兄弟姐妹之间重新排列。 祖籍图书保持了父亲/母亲的习俗. 节点只在自己划出的群体(离合器或垃圾架)和父母相同的个人之间移动,因此框和家族界线都真实无误。 数据永远不会改变:顺序是您保留(并可能保存)的布局选项.

```tsx
const [nodeOrder, setNodeOrder] = useState<string[]>([])
const layout = useMemo(() => layoutSync(projection, { nodeOrder }), [projection, nodeOrder])

<PedigreeExplorer projection={projection} layout={layout} nodeOrder={nodeOrder} onNodeOrderChange={setNodeOrder} />
```

`dropNodeOrder(layout, occurrenceId, delta, current, groupOf)` 用于自定义 UI 的导出.

## 主题和颜色

7个预设,每个预设都带有自己的每景口音(例如温暖的妈妈和酷儿的父亲) 线条,关系和繁衍取景的不同亮点,扇形环阴影: `classic`, (中文(简体) ), `midnight`, (中文(简体) ), `forest`, (中文(简体) ), `ocean`, (中文(简体) ), `terracotta`, (中文(简体) ), `high-contrast`, (中文(简体) ), `print`。 。 。 .

```tsx
<PedigreeView projection={projection} layout={layout} theme="forest" />
<PedigreeExplorer projection={projection} layout={layout} theme="ocean" themeEditor onThemeChange={save} />
```

`themeEditor` 添加颜色按钮: 选择预设并用取色器调整任何颜色 或十六进制码, 用于所有视图或仅用于当前视图, 当文本对比度下降时带有警告 位于WCAG AA以下. `onThemeChange` 接收编辑后的主题( 一个普通对象)以存储; 通过它 恢复为 `theme`。 。 。 . `ThemeEditor` 也导出用于您自己的设置页面。 主题是 作为内置自定义属性被渲染出,所以它们在服务器渲染中工作.

## 品牌家庭

一个Pedigree和一个Taxonomy共享一个骨干(`brand/README.md`: 同一行图标(`Icon`, (中文(简体) ), `ICON_PATHS`),32 px控件,浮动帆布工具栏和Captive Origins橙色焦点环,而每个都保留了自己的视角和性能.

## 样式

-   默认样式表 `styles.css` (可选的;留出用于无样式模式).
-   CSS 自定义属性 : `--op-node-background`, (中文(简体) ), `--op-node-border`, (中文(简体) ), `--op-connector`, (中文(简体) ), `--op-selected-ring`, (中文(简体) ), `--op-highlight`, (中文(简体) ), `--op-focal-border`, (中文(简体) ), `--op-label`,, , , , , , , ,
-   稳定班级(`.op-root`, (中文(简体) ), `.op-node`, (中文(简体) ), `.op-individual`, (中文(简体) ), `.op-connector`, (中文(简体) ), `.op-junction`, (中文(简体) ), `.op-cohort`, (中文(简体) ), `.op-fan-segment`)和数据属性(`data-individual`, (中文(简体) ), `data-occurrence`, (中文(简体) ), `data-repeated`, (中文(简体) ), `data-generation`, (中文(简体) ), `data-cohort`, (中文(简体) ), `data-reproductive-mode`, (中文(简体) ), `data-sex`, (中文(简体) ), `data-focal`, (中文(简体) ), `data-selected`, (中文(简体) ), `data-highlighted`) (中文(简体) ).
-   `classNames` 覆盖并渲染槽 `renderIndividual`, (中文(简体) ), `renderCohortMarker`, (中文(简体) ), `renderQuickView`。 。 。 .
-   无头: `@captiveorigins/onepedigree-react/headless` (吼声) `usePedigreeProjection`, (中文(简体) ), `usePedigreeLayout`, (中文(简体) ), `usePedigreeSelection`, (中文(简体) ), `usePedigreeNavigation`, (中文(简体) ), `useOccurrenceHighlighting`,以及 `describeProjection`为了你自己的制造器.

## 无障碍

语义 SVG 与 `<title>`编号 :`<desc>` 摘要,每个节点可访问名称,键盘 导航(节点之间、 输入选择、 逃出清除、 +/−/ 0 缩放、 Shift+ rows) ),可可见的焦点,减动支持,以及非颜色提示:相交形状(圆形= 双亲模式,菱形=单亲家庭模式,正方形=可变;空心=不完整,行 每一个生殖模式的图案,以及一个qq标记加上重复的个体的破折边界.

## 许可证

[非商业形式 1.0.0](https://polyformproject.org/licenses/noncommercial/1.0.0). 免费用于非商业用途,具有归属性;商业用途需要从Captive Origins获得单独的许可证. 这一变化之前出版的版本仍然属于麻省理工学院.

## 常见问题

### @captiveorigins/onepedigree-react 是什么？

OnePedigree for React:服务器可登陆的 SVG pedigree 视图\(全为13\),是一个交互式的探索器,无头钩和CSS可变型\.

### 如何安装 @captiveorigins/onepedigree-react？

在项目目录运行 npm install @captiveorigins/onepedigree-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @captiveorigins/onepedigree-react 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @captiveorigins/onepedigree-react 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @captiveorigins/onepedigree-react 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @captiveorigins/onepedigree-react 可以商用吗？

@captiveorigins/onepedigree-react 使用 PolyForm-Noncommercial-1\.0\.0 许可。声明的许可为 PolyForm-Noncommercial-1\.0\.0，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。

### @captiveorigins/onepedigree-react 的下载量有多少？

根据 npm 官方下载统计，@captiveorigins/onepedigree-react 在 2026/10/09 – 2026/11/07 这 30 天内被下载 1,821 次，日均约 61 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @captiveorigins/onepedigree-react 还在维护吗？

最新版本 0\.1\.0-alpha\.13 发布于 2026/11/09（今天）；至今共发布 11 个版本，其中过去 12 个月发布了 11 个；首次发布于 2026/11/01。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。