|
2 | 2 | title: 使用 React 定义节点 |
3 | 3 | order: 5 |
4 | 4 | --- |
| 5 | + |
| 6 | +## 简介 |
| 7 | + |
| 8 | +在数据可视化领域，为高效率使用 AntV G6，节点定义可采用 React 组件的方式。 |
| 9 | +为了让用户能更加方便地进行 react 自定义节点，我们提供了 g6-extension-react 库用于集成使用进而为用户提高开发效率。 |
| 10 | + |
| 11 | +### g6-extension-react |
| 12 | + |
| 13 | +g6-extension-react 是 AntV G6 图可视化库的一个扩展，它将 React 框架与 G6 进行了集成，使得开发者能够使用 React 组件来定义和渲染 G6 中的节点、边等图元素。通过这种方式，开发者可以充分利用 React 的组件化开发模式、状态管理能力以及丰富的生态系统来构建复杂且交互性强的图可视化应用。 |
| 14 | + |
| 15 | +#### 优点 |
| 16 | + |
| 17 | +- 组件化开发：在图可视化场景下，节点的设计往往会更加复杂，不仅要考虑多样化的样式呈现，还要兼顾复杂的交互逻辑，这无疑增加了开发的难度和工作量。而使用 g6-extension-react 可以将图中的节点封装成独立的 React 组件，这为解决节点设计的复杂性提供了有效的解决方案。 |
| 18 | +- 状态管理：React 提供了强大的状态管理机制，如 useState、useReducer 等钩子函数，以及 Redux、MobX 等外部状态管理库。在 g6-extension-react 中，可以利用这些机制轻松管理图元素的状态，实现动态更新。比如，当用户点击某个节点时，可以通过修改节点组件的状态来改变其样式，如颜色、大小等。 |
| 19 | +- 丰富的生态系统：React 拥有庞大的生态系统，有众多的开源组件和工具可供使用。在 g6-extension-react 中，可以引入这些组件和工具来增强图元素的功能。例如，可以使用 react-icons 库为节点添加图标，使用 react-transition-group 库实现节点的动画效果。 |
| 20 | +- 易于集成：由于 g6-extension-react 基于 React 开发，它可以很方便地集成到现有的 React 项目中。开发者可以利用现有的 React 开发流程和工具链，快速搭建图可视化应用。 |
| 21 | + |
| 22 | +## 使用步骤 |
| 23 | + |
| 24 | +### 准备工作 |
| 25 | + |
| 26 | +1. 在使用 g6-extension-react 之前，请确保已经安装并创建 React 项目 |
| 27 | + |
| 28 | +2. Reac 版本要求：>=16.8.0 |
| 29 | + |
| 30 | +3. 如果要支持使用 TypeScrit，需要 tsconfig.json 配置文件支持 jsx 语法 |
| 31 | + |
| 32 | +```json |
| 33 | +{ |
| 34 | + "compilerOptions": { |
| 35 | + "jsx": "react-jsx" |
| 36 | + } |
| 37 | +} |
| 38 | +``` |
| 39 | + |
| 40 | +### 安装依赖 |
| 41 | + |
| 42 | +npm 方式安装： |
| 43 | + |
| 44 | +```bash |
| 45 | +npm install @antv/g6-extension-react |
| 46 | +``` |
| 47 | + |
| 48 | +yard 方式安装： |
| 49 | + |
| 50 | +```bash |
| 51 | +yarn add @antv/g6-extension-react |
| 52 | +``` |
| 53 | + |
| 54 | +pnpm方式安装： |
| 55 | + |
| 56 | +```bash |
| 57 | +pnpm add @antv/g6-extension-react |
| 58 | +``` |
| 59 | + |
| 60 | +### 自定义React节点 |
| 61 | + |
| 62 | +```jsx |
| 63 | +import { ReactNode } from '@antv/g6-extension-react'; |
| 64 | + |
| 65 | +const MyReactNode = () => { |
| 66 | + return <div>node</div>; |
| 67 | +}; |
| 68 | +``` |
| 69 | + |
| 70 | +### 注册节点 |
| 71 | + |
| 72 | +```jsx |
| 73 | +import { ExtensionCategory, register } from '@antv/g6'; |
| 74 | +import { ReactNode } from '@antv/g6-extension-react'; |
| 75 | + |
| 76 | +register(ExtensionCategory.NODE, 'react-node', ReactNode); |
| 77 | +``` |
| 78 | + |
| 79 | +### 使用节点 |
| 80 | + |
| 81 | +使用自定义的 ReactNode 节点： |
| 82 | + |
| 83 | +```jsx |
| 84 | +const graph = new Graph({ |
| 85 | + // ... other options |
| 86 | + node: { |
| 87 | + type: 'react-node', |
| 88 | + style: { |
| 89 | + component: () => <ReactNode />, |
| 90 | + }, |
| 91 | + }, |
| 92 | +}); |
| 93 | +``` |
| 94 | + |
| 95 | +## 状态管理和交互事件 |
| 96 | + |
| 97 | +### 状态管理 |
| 98 | + |
| 99 | +在 G6 中，节点状态的管理和样式展示可以通过以下方式实现。 |
| 100 | + |
| 101 | +#### G6 内置交互状态管理 |
| 102 | + |
| 103 | +在使用内置交互行为（如 hover-activate 或 click-select）时，G6 会自动为节点维护状态。此时，你可以通过访问节点数据中的 data.states 字段来获取当前节点的状态，并依据这些状态来调整节点的样式逻辑。例如，当节点处于 hover 状态时，改变其颜色或大小，以提供更好的交互反馈。 |
| 104 | + |
| 105 | +**示例**： |
| 106 | + |
| 107 | +假设我们有一个简单的节点，并希望在节点被 hover 时改变其背景颜色。 |
| 108 | + |
| 109 | +```jsx |
| 110 | +import { Graph } from '@antv/g6'; |
| 111 | + |
| 112 | +const graph = new Graph({ |
| 113 | + ... |
| 114 | + data: { |
| 115 | + nodes: [ |
| 116 | + { id: 'node1', x: 100, y: 200 }, |
| 117 | + { id: 'node2', x: 300, y: 200 }, |
| 118 | + ], |
| 119 | + }, |
| 120 | + node: { |
| 121 | + type: 'react-node', |
| 122 | + style: { |
| 123 | + component: ({ data }) => { |
| 124 | + const backgroundColor = data.states?.hover ? 'lightblue' : 'white'; |
| 125 | + return ( |
| 126 | + <div |
| 127 | + style={{ |
| 128 | + ... |
| 129 | + backgroundColor: backgroundColor, |
| 130 | + }} |
| 131 | + > |
| 132 | + {data.id} |
| 133 | + </div> |
| 134 | + ); |
| 135 | + }, |
| 136 | + }, |
| 137 | + }, |
| 138 | + behaviors: ['hover-activate'] |
| 139 | +}); |
| 140 | +``` |
| 141 | +
|
| 142 | +#### React 自定义状态管理 |
| 143 | +
|
| 144 | +我们也可以通过在节点数据中自定义状态字段，手动管理状态的切换以及样式的更新。比如，你可以在节点数据里添加一个自定义的状态标识，然后在代码中根据这个标识来动态修改节点的样式。这种方式给予开发者更大的灵活性，适用于有特殊需求的场景。你可以通过 data 传入状态，以此让节点展示不同的样式，这就是手动管理状态时的操作方式。 |
| 145 | +
|
| 146 | +**示例**： |
| 147 | +
|
| 148 | +通过 data 添加 selected 参数，实现节点选中和取消选中的样式变化。 |
| 149 | +
|
| 150 | +graph 实例所需 data 中传递： |
| 151 | +
|
| 152 | +```json |
| 153 | +const data = { |
| 154 | + nodes: [ |
| 155 | + { |
| 156 | + id: 'node1', |
| 157 | + data: { |
| 158 | + ... // other data |
| 159 | + selected: true, // selcted status |
| 160 | + }, |
| 161 | + }, |
| 162 | + ... |
| 163 | + ] |
| 164 | +} |
| 165 | +``` |
| 166 | +
|
| 167 | +自定义节点内展示： |
| 168 | +
|
| 169 | +```jsx |
| 170 | +const MyReactNode = ({ data }) => { |
| 171 | + return ( |
| 172 | + <Card |
| 173 | + style={{ |
| 174 | + width: 500, |
| 175 | + padding: 10, |
| 176 | + borderColor: data.selected ? 'orange' : '#ddd', // 根据选中状态设置边框颜色 |
| 177 | + cursor: 'pointer', // 添加鼠标指针样式 |
| 178 | + }} |
| 179 | + > |
| 180 | + ... |
| 181 | +} |
| 182 | +``` |
| 183 | +
|
| 184 | +### 交互事件 |
| 185 | +
|
| 186 | +我们可以传递回调函数，在节点上与图实例进行交互。 |
| 187 | +
|
| 188 | +#### 示例： |
| 189 | +
|
| 190 | +通过 data 传递回调事件，实现通过自定义节点操作图数据。 |
| 191 | +
|
| 192 | +注册节点： |
| 193 | +通过在 props 定义接受回调函数 |
| 194 | +
|
| 195 | +```json |
| 196 | +const IDCardNode = ({ id, data, onSelectChange }) => { |
| 197 | + ... |
| 198 | + const handleSelect = () => { |
| 199 | + onSelectChange() |
| 200 | + } |
| 201 | + |
| 202 | + return ( |
| 203 | + ... |
| 204 | + <Select |
| 205 | + onChange={handleSelect} |
| 206 | + ... |
| 207 | + /> |
| 208 | + ... |
| 209 | + ) |
| 210 | +} |
| 211 | +``` |
| 212 | +
|
| 213 | +创建 Graph 实例时候，传递 onSelectChange 回调函数： |
| 214 | +
|
| 215 | +```jsx |
| 216 | +const graph = new Graph({ |
| 217 | + ... |
| 218 | + data, |
| 219 | + node: { |
| 220 | + type: 'react', |
| 221 | + style: { |
| 222 | + component: (data) => <IDCardNode |
| 223 | + id={data.id} |
| 224 | + data={{ ...data.data, graph: graph }} |
| 225 | + onSelectChange={handleSelectChange} />, |
| 226 | + }, |
| 227 | + }, |
| 228 | +``` |
| 229 | +
|
| 230 | +## 在线测试 |
| 231 | +
|
| 232 | +<div> |
| 233 | + <Playground path="element/custom-node/demo/react-node.jsx" rid="react-node-rid"></Playground> |
| 234 | + <Playground path="element/custom-node/demo/reactnode-idcard.jsx" rid="reactnode-idcard-rid"></Playground> |
| 235 | +</div> |
0 commit comments