{"id":18470826,"url":"https://github.com/nefe/regraph","last_synced_at":"2025-07-25T00:34:02.173Z","repository":{"id":40670956,"uuid":"241780044","full_name":"nefe/regraph","owner":"nefe","description":"Graph Visualization Tool based React","archived":false,"fork":false,"pushed_at":"2023-01-27T10:30:28.000Z","size":4832,"stargazers_count":79,"open_issues_count":12,"forks_count":8,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-14T06:09:10.831Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://nefe.github.io/regraph/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nefe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-20T03:02:03.000Z","updated_at":"2024-08-05T23:30:30.000Z","dependencies_parsed_at":"2023-01-29T00:16:24.375Z","dependency_job_id":null,"html_url":"https://github.com/nefe/regraph","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nefe%2Fregraph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nefe%2Fregraph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nefe%2Fregraph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nefe%2Fregraph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nefe","download_url":"https://codeload.github.com/nefe/regraph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223317849,"owners_count":17125605,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T10:14:57.811Z","updated_at":"2024-11-06T10:14:57.933Z","avatar_url":"https://github.com/nefe.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ReGraph\n\n数据领域图表定义：以树、图为基础数据结构，带有数据业务属性与特征的图表\n\n现状与痛点\n\n- 数据产品中领域图表较多，业务场景丰富\n- 产品中领域图表交互实现方式不统一\n- 领域图表开发成本高，几乎都需要个性化开发\n- 在树与图的渲染与交互上，比较成熟，但在布局上，对于开发者而言，门槛很高，直接使用第三方库也很难上手，很难调整到理想情况\n\nReGraph针对以上痛点，打造了基础操作层、渲染交互层、布局算法层三层结构。\n\nReGraph = 计算（布局插件）+ 底层操作（树图基础库）+ 渲染（交互的统一封装）\n\n## 安装\n\n```\nyarn add regraph-next\n```\n\n## ReScreen\n\nReScreen 组件统一封装了画布的操作和缩略图功能，支持对画布的全屏、复位、显示所有、重置、平移缩放等常见功能。\n\n### 使用\n\n```tsx\nimport { ReScreen } from 'regraph-next';\n\n\u003cReScreen  \n  height = {500}\n  width = {500}\n  mapWidth = {200}\n  mapHeight = {200}\n  mapPosition = \"RT-IN\" \u003e\n  \u003csvg\u003e\n    \u003cg\u003e\n      \u003ccircle cx={0} cy={0} r={500} fill=\"yellow\" /\u003e\n      \u003ccircle cx={cx} cy={cy} r={250} fill=\"red\" /\u003e \n    \u003c/g\u003e\n  \u003c/svg\u003e \n\u003c/ReScreen\u003e\n\n```\n\n### API\n| 参数           | 说明     | 类型         | 默认值                                                                    |\n| -------------- | -------- | --------------- | ------------------------------------------------------------------------------ |\n| type | 画布内容的类型 | 枚举值，可选值（`SVG` ,`DOM`) | SVG |\n| width | 组件整体的尺寸，支持传入百分数 | number/string | - | \n| height | 组件整体的尺寸，支持传入百分数 | number/string | - | \n| zoomEnabled | 是否启动鼠标滚动缩放画布 | boolean | true | \n| focusEnabled | 是否启动聚焦功能，0表示不启动，1表示单击触发，2表示双击触发 | number | 0 | \n| minZoom | 缩放范围，最小值 | number | - |\n| maxZoom | 缩放范围，最大值 | number | - |\n| dragDirection | `ALL`,`HOR`, `VER` | 拖拽方向的锁定 | `ALL` |\n| needMinimap | 是否需要缩略图 | boolean | true |\n| minimap | React.ReactElement\u003cany\u003e | 支持自定义传入缩略图组件 | - |\n| mapPosition | `RT`, `RB`, `LT`, `LB`,  `RT-IN`, `RB-IN`, `LT-IN`, `LB-IN` | 缩略图位置，右上角；-IN表示在画布的内部 | 默认为`RT` |\n| mapPadding | 缩略图和原图之间的大小 | number | 20| \n| mapWidth | 缩略图大小 | number | 100px | \n| mapHeight | 缩略图大小 | number | 100px | \n| mapRectStyle | 缩略图矩形的样式 | object | - |\n| Buttons | 按钮组件 | React.ReactElement\u003cany\u003e | - |\n| needRefresh | 由于画布元素的变化而引起的视图变化 | boolean | - |\n| resetNeedRefresh | 通知外层重置needRefresh为false | function | - |\n| onScreenChange | 画布发生变化时的回调，对外暴露当前的缩放信息 | (transform: ZoomTransform) =\u003e void | - |\n| getScreenHandler | 对外暴露画布操作函数 | any | - |\n\n\n## BaseGraph\n\nBaseGraph 以树、图为基础数据结构，规范数据定义并提供基础操作库。\n\n### 功能\n\n#### 树\n\n- 插入/删除/替换/查找节点/子树\n- 插入/删除/替换/查找边\n- 获取父节点/子节点/子孙节点/兄弟（层级结构/扁平结构/排序规则）\n- 获取两个子节点的相同父节点\n- 获取子节点到  任意节点（跟节点）的路径\n\n#### 图\n\n- 插入/删除/替换/查找节点\n- 插入/删除/替换/查找边\n- 获取父节点/子节点/子孙节点/兄弟（层级结构/扁平结构/排序规则）\n- 获取两个子节点的相同父节点\n- 获取子节点到任意节点（跟节点）的路径\n\n更多详细[BaseGraph API](https://github.com/nefe/regraph/blob/master/docs/api/BaseGraph.md)\n\n## BaseLayout\n\nBaseLayout 主要处理树图布局集成\n\n### 使用方式\n\n```ts\nimport { ReLayout } from 'regraph-next';\nconst { DAGAIU } = ReLayout;\ninterface MyRelation {\n  sourceId: number;\n  targetId: number;\n  periodDiff: number;\n}\ninterface MyNode {\n  id: number;\n  downRelations: MyRelation[];\n  upRelations: MyRelation[];\n  name: string;\n  desc: string;\n  nodeWidth?: number;\n  nodeHeight?: number;\n}\n// 生成dag图\nconst dag = new DAGAIU\u003cMyNode, MyRelation\u003e({\n  isTransverse: true,\n  padding: 20,\n});\n```\n\n- 生成单个DAG\n\n```ts\ndag.getSingleDAG(data)\n```\n\n- 生成多个DAG\n\n```ts\ndag.getMultiDAG(data)\n```\n\n- 带组的图布局\n\n```ts\nthis.groupLayout = new GroupGraphLayout(nodes, links, groups, groupLinks, config);\nthis.groupLayout.layout();\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnefe%2Fregraph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnefe%2Fregraph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnefe%2Fregraph/lists"}