# @tntv/react-graph > 知识图谱组件 Latest version **1.0.24** (published 2026-09-16) · ISC license · 0 weekly downloads ## Install ```sh npm install @tntv/react-graph pnpm add @tntv/react-graph yarn add @tntv/react-graph bun add @tntv/react-graph ``` ## Health **Score 55/100 (C)** — status: active. Positive: no vulnerabilities; recently updated; high maintenance score. Warnings: low downloads; no types; no esm support. ## Facts | | | |---|---| | Version | 1.0.24 | | Published | 2026-09-16 | | First published | 2021-02-26 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 20 | | Unpacked size | 169.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | ued | | Maintainers | td-tnt, bruceliu68, zhouzefei, xiaofei.wang, mizy, ezios | | Keywords | react, d3-force | ## Links - npm: https://www.npmjs.com/package/@tntv/react-graph - Repository: https://gitlab.fraudmetrix.cn/ued/react-graph - Homepage: https://gitlab.fraudmetrix.cn/ued/react-graph#readme - Issues: https://gitlab.fraudmetrix.cn/ued/react-graph/issues - npm.io page: https://npm.io/package/@tntv/react-graph ## Dependencies (20) - [mobx](https://npm.io/package/mobx.md) 4.* - [dagre](https://npm.io/package/dagre.md) ^0.8.5 - [elkjs](https://npm.io/package/elkjs.md) ^0.9.1 - [react](https://npm.io/package/react.md) ^16.6.3 - [lodash](https://npm.io/package/lodash.md) ^4.17.11 - [d3-drag](https://npm.io/package/d3-drag.md) ^1.2.5 - [d3-ease](https://npm.io/package/d3-ease.md) ^1.0.6 - [d3-zoom](https://npm.io/package/d3-zoom.md) ^1.8.3 - [d3-force](https://npm.io/package/d3-force.md) ^2.0.1 - [d3-scale](https://npm.io/package/d3-scale.md) ^3.2.1 - [d3-shape](https://npm.io/package/d3-shape.md) ^1.3.7 - [react-dom](https://npm.io/package/react-dom.md) ^16.6.3 - [mobx-react](https://npm.io/package/mobx-react.md) 6.* - [d3-dispatch](https://npm.io/package/d3-dispatch.md) ^1.0.6 - [d3-flextree](https://npm.io/package/d3-flextree.md) ^2.1.1 - [d3-hierarchy](https://npm.io/package/d3-hierarchy.md) ^1.1.9 - [d3-selection](https://npm.io/package/d3-selection.md) ^1.4.1 - [d3-transition](https://npm.io/package/d3-transition.md) ^1.3.2 - [d3-interpolate](https://npm.io/package/d3-interpolate.md) ^1.4.0 - [point-at-length](https://npm.io/package/point-at-length.md) ^1.1.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.0.24 (latest) — 2026-09-16 - 1.0.23 — 2026-03-23 - 1.0.22 — 2024-10-17 - 1.0.21 — 2024-10-14 - 2.0.1 — 2024-09-12 - 1.0.20 — 2024-09-12 - 2.0.0 — 2024-04-26 - 1.0.19 — 2024-01-10 - 1.0.18 — 2023-09-05 - 1.0.17 — 2023-04-13 - 1.0.16 — 2023-03-17 - 1.0.15 — 2023-03-14 - 1.0.14 — 2023-03-13 - 1.0.12 — 2023-01-17 - 1.0.11 — 2023-01-14 - … 12 more at https://npm.io/package/@tntv/react-graph/versions ## README # 知识图谱可视化 ## 组件 通用配置 | 参数 | 说明 | 类型 | 默认值 | | ---------------- | --------------------------------------------------- | -------------------------------------- | --------- | | actions | GraphRootStore 实例 | GraphRootStore | undefined | | width | 容器宽度(不设置的时候内部自动读取) | Number | undefined | | height | 容器高度(不设置的时候内部自动读取) | Number | undefined | | canRegion | 是否可以框选 | Boolean | false | | renderNode | 自定义 Node 渲染 | React.ReactNode | 内置渲染 | | renderEdge | 自定义 Edge 渲染 | React.ReactNode | 内置渲染 | | nodeEvents | 节点事件(click,dblclick,contextmenu 等) | {eventType: Function(node,d3Event)} | {} | | edgeEvents | 关系事件(click,dblclick,contextmenu 等) | {eventType: Function(edge,d3Event)} | {} | | graphEvents | 关系事件(click,dblclick,contextmenu 等) | {eventType: Function(actions,d3Event)} | {} | | regionEvents | 框选事件(brushStart,brushMove,brushEnd,brushOffset) | {eventType: Function()} | {} | | onGraphLayoutEnd | 布局完成 | Function() | undefined | | className | 自定义类名 | Function() | undefined | ### Force 图谱可视化组件 | 参数 | 说明 | 类型 | 默认值 | | ---------------- | ---------------- | ----------------------- | --------- | | layout | 布局算法 | String\|Class | 'force' | | layoutConfig | 布局配置 | Object | undefined | | graphData | 数据配置 | [GraphData](#graphdata) | undefined | | canDrag | 是否可以拖拽 | Boolean | true | | graphCanDrag | 画板是否可以拖拽 | Boolean | true | | disableWheelZoom | 禁用鼠标滚轮缩放 | Boolean | false | | isFixed | 是否固定的定位 | Boolean | false | ### Tree 图谱可视化组件 | 参数 | 说明 | 类型 | 默认值 | | --------- | ---------------- | ----------------------- | --------- | | graphData | 数据配置 | [GraphData](#graphdata) | undefined | | ranksep | 每层之间间距 | Number | 50 | | nodesep | 同层节点之间间距 | Number | 10 | | groupsep | 各个组之间间距 | Number | 0 | | align | 层级间对齐 | Boolean | true | ## API ### createActions() 此方法生成实例为图谱展示的数据管理实例，必不可少； #### actions.addData([GraphData](#graphdata), isReplace = false) 往当前图谱中添加数据，数据格式固定；isReplace 为 true 的时候会替换当前所有数据 #### actions.savePic(fileType) 当前图谱保存为图片，格式支持 jpeg|png|svg #### actions.adaption(padding=30, minScale=undefined) 自适应当前视图大小；`padding`为四周间隔，`minScale`为最小缩放量 #### actions.zoomIn(step=0.1) 放大，setp 为百分比 #### actions.zoomOut(step=0.1) 缩小，setp 为百分比 #### actions.zoomTo(scale) 缩放为原图的 scale 倍 #### actions.relayout() 重新布局 #### actions.focus(nodeId) 聚焦到某个节点 ### Layout 内置了以下布局，可以在 ReactGraph 里配置 ``` { force: '力导布局', tree: '树形布局', grid: '网格布局' } ``` 如果需要实现自定义布局，需要继承`BasicLayout`类实现 ### utils #### shortestPath 最短路径计算 #### fullPath(number) n 度以内全路径计算 #### isomorphicAnalysis(GraphData) 同构图分析，返回分析后的同构图 ### 数据说明 #### Node ``` { id: String, type: String, label: String, x: Number, y: Number, nodeSize: Number, mode: String, ...other } ``` #### Edge ``` { id: String, target: String, source: String, type: String, label: String, strokeWidth: Number, isDirected:false, ...other } ``` #### GraphData ``` { nodes: Node[], edges: Edge[] } ``` ### 其他 注意：如果需要兼容 ie11，打包的 babel 的配置里面请不要排除`d3-force`、`d3-quadtree`和`d3-timer`，因为他们内部包含了箭头函数、const #### 规划功能 动画：路径分析后出来的结果是否可以以动画的形式展示 eg: pipe(animate(node1), animate(edge1), animate(node2), animate(edge2), animate(node3)) 图形扩展：圆形、矩形、椭圆 :tada: :tada: :tada: :see_no_evil: --- _Source: https://npm.io/package/@tntv/react-graph · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._