docs: 改造文档「元素 - 节点 - 使用 React 定义节点」 #6959
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* fix: 修复Fisheye在·update时，未更新this.r/this.d * fix: options.r/options.d非空判断 --------- Co-authored-by: liujiangyu <[email protected]>
yvonneyx
reviewed
Mar 31, 2025
| @@ -2,3 +2,117 @@ | |||
| title: 使用 React 定义节点 | |||
| order: 5 | |||
| --- | |||
|
|
|||
There was a problem hiding this comment.
目前不支持 GNode 只支持 React Node，可以关注介绍 React Node 相关内容。
给一些小 tips 来完善这篇文档，可以把以下方面讲清楚：
- 介绍（g6-extension-react是什么，优劣势）
- 准备工作（环境要求、安装依赖、项目配置）
- 使用（引入方式和注册、创建一个 React 组件、使用节点）
- 节点状态管理（说明如何将 G6 的节点状态传递给 React 组件，组件内部如何响应）
- 交互事件（如何在 React 组件内部处理事件）
fix antvis#6904 Co-authored-by: 秦奇 <[email protected]>
* docs: 添加 Snapline 插件文档和示例，更新中文和英文手册内容 * docs: 更新 Snapline 插件文档，优化使用场景描述和样式配置示例 * feat: 新增鱼眼放大镜插件文档，包含概述、使用场景、基本用法及配置项详细说明，更新中英文手册内容。 * docs: 更新鱼眼放大镜插件文档，增加样式属性和节点样式的详细说明，优化示例代码和中文翻译，删除API部分内容； --------- Co-authored-by: liujiangyu <[email protected]>
liaodalin19903
changed the title
* docs: 添加 Snapline 插件文档和示例，更新中文和英文手册内容 * docs: 更新 Snapline 插件文档，优化使用场景描述和样式配置示例 * feat: 新增鱼眼放大镜插件文档，包含概述、使用场景、基本用法及配置项详细说明，更新中英文手册内容。 * docs: 更新鱼眼放大镜插件文档，增加样式属性和节点样式的详细说明，优化示例代码和中文翻译，删除API部分内容； * docs: 更新水印插件文档，增加概述、使用场景、基本用法及配置项详细说明，优化示例代码和中英文翻译。 --------- Co-authored-by: liujiangyu <[email protected]>
fix antvis#6904 Co-authored-by: 秦奇 <[email protected]>
* docs(CreateEdge): 改造文档 [交互 - 内置交互 - CreateEdge 创建边] * docs: 创建边中文文档更新 * docs: 内置交互-createEdge创建边文档删除销毁交互实例部分
* docs: 更新主题总览和自定义主题文档 * docs: update toc
…option的ts类型应该使用CircleStyleProps (antvis#6976) * fix: 当触发update时，options.r未赋值给this.r，导致配置未生效 fix: style option的ts类型应该使用CircleStyleProps * chore: defaultLensStyle改为使用CircleStyleProps，与fisheye plugin保持一致 * chore: 更新edge-filter-lens插件，CircleStyleProps的导入方式增加type前缀 --------- Co-authored-by: liujiangyu <[email protected]>
* feat(g6-extension-react): react 19 compatibility support * fix: test failed * chore(g6-extension-react): 更新 React 和相关类型定义至 19 版本，调整 createRoot 初始化逻辑以支持 React 18+ 的动态导入 * chore(g6-extension-react): 启用动态导入以支持更灵活的模块加载 * fix: 更新 react-dom 引用以支持 React 18+ 的新客户端 API
* docs: 添加边过滤镜插件文档，包含概述、使用场景、基本用法及配置项详细说明，更新中英文手册内容 * docs: 更新EdgeFilterLens文档，增加完整样式属性的参考链接，更新中英文手册内容 --------- Co-authored-by: liujiangyu <[email protected]>
Co-authored-by: liujiangyu <[email protected]>
yvonneyx
reviewed
Apr 10, 2025
| - 组件化开发：React 以组件化开发著称，使用 g6-extension-react 可以将图中的节点和边封装成独立的 React 组件。这有助于提高代码的复用性，减少重复开发工作。例如，在一个复杂的图可视化应用中，可能有多种类型的节点，但部分节点的基本样式和交互逻辑是相同的，此时可以将这些共性封装成一个 React 组件，在不同地方复用。 | ||
| - 状态管理：React 提供了强大的状态管理机制，如 useState、useReducer 等钩子函数，以及 Redux、MobX 等外部状态管理库。在 g6-extension-react 中，可以利用这些机制轻松管理图元素的状态，实现动态更新。比如，当用户点击某个节点时，可以通过修改节点组件的状态来改变其样式，如颜色、大小等。 | ||
| - 丰富的生态系统：React 拥有庞大的生态系统，有众多的开源组件和工具可供使用。在 g6-extension-react 中，可以引入这些组件和工具来增强图元素的功能。例如，可以使用 react-icons 库为节点添加图标，使用 react-transition-group 库实现节点的动画效果。 | ||
| - 易于集成：由于 g6-extension-react 基于 React 开发，它可以很方便地集成到现有的 React 项目中。开发者可以利用现有的 React 开发流程和工具链，快速搭建图可视化应用。 |
yvonneyx
reviewed
Apr 10, 2025
|
|
||
| #### 优点 | ||
|
|
||
| - 组件化开发：React 以组件化开发著称，使用 g6-extension-react 可以将图中的节点和边封装成独立的 React 组件。这有助于提高代码的复用性，减少重复开发工作。例如，在一个复杂的图可视化应用中，可能有多种类型的节点，但部分节点的基本样式和交互逻辑是相同的，此时可以将这些共性封装成一个 React 组件，在不同地方复用。 |
There was a problem hiding this comment.
"使用 g6-extension-react 可以将图中的节点和边封装成独立的 React 组件" 这个库只提供了 React 节点，没有边哦。在实际使用场景中，往往节点的设计会更加复杂
|
|
||
| ### 状态 | ||
|
|
||
| 我们可以通过data传入状态，以便节点展示不同的样式。 |
There was a problem hiding this comment.
在使用 内置交互行为（如 hover-activate 或 click-select）时，G6 会自动为节点维护状态。此时，可通过访问节点数据中的 data.states 字段获取当前状态，并据此调整样式逻辑。当然，也可以绕过内置机制，通过在节点数据中自定义状态字段，手动管理状态切换与样式更新，就是你现在写的方式。两种都可以提一下
| border-radius: 3px; | ||
| font-size: 10px; | ||
| } | ||
| </style> |
There was a problem hiding this comment.
这里的样式可以通过 insertCss 直接加到对应的示例中
yvonneyx
approved these changes
Apr 11, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
内容：