test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-11-30 02:38:20 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

docs: update interaction design docs; chore: update gatsby theme

Browse Source
This commit is contained in:
Yanyan-Wang 2020-11-23 15:30:54 +08:00 committed by Yanyan Wang
parent dbb15ca8cc
commit bc225d3220
5 changed files with 53 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/api/graphFunc/get_set.en.md
View File

@ -66,7 +66,7 @@ graph.getContainer();
### graph.getGroup()
Get the root [graphics group](/en/docs/manual/advanced/keyconcept/graphics-group) of the graph.
Get the root [graphics group](/en/docs/manual/middle/elements/shape/graphics-group) of the graph.
**Parameter**

2
docs/api/graphFunc/get_set.zh.md
View File

@ -66,7 +66,7 @@ graph.getContainer();
### graph.getGroup()
获取 Graph 根[图形分组](/zh/docs/manual/advanced/keyconcept/graphics-group)。
获取 Graph 根[图形分组](/zh/docs/manual/middle/elements/shape/graphics-group)。
**参数**

72
docs/design/global/Interactive.zh.md
View File

@ -8,14 +8,14 @@ order: 1
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*mi1QTZ9LC7oAAAAAAAAAAAAAARQnAQ' width='90%' />
> 图1.1 《人际关系星形图》（ Personal Friendster ） - Jeffrey Heer 2004
> 图 1.1 《人际关系星形图》（ Personal Friendster ） - Jeffrey Heer 2004 <br />
> Personal Friendster 是 Vizster 在线社交网络可视化项目的一部分，加利福利亚大学伯克利分校的 Jeffrey 教授采集了自己在社交网络 Friendster 中的三度人际关系数据，通过力导向布局可视化了以自己为中心的 47471 人与 432430 段关系，该图颠覆了人的认知：仅仅三度关系，就能构建出如此庞大的社交网络。这是该项目希望达成的目标，但要在如此庞大的节点与边中去探索具体的人与关系，作为静态图无疑是不可能的。
为了使图能传达具体的信息，而不仅只是模糊的感知，需要将可视化空间中的图元数量限制在人肉眼可识别能力的范围内。并在下一步提供恰当的交互，来使用户渐进式地发现更丰富与多维的信息（图1.2）。
为了使图能传达具体的信息，而不仅只是模糊的感知，需要将可视化空间中的图元数量限制在人肉眼可识别能力的范围内。并在下一步提供恰当的交互，来使用户渐进式地发现更丰富与多维的信息（图 1.2）。
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*scg7QY5DZkEAAAAAAAAAAAAAARQnAQ' width='90%' />
> 图2.2 GraphStudio - Alibaba Inc.
> 图 1.2 GraphStudio - Alibaba Inc. <br />
> 通过条件筛选、搜索、双击展开关系等等交互方式探索数据，令用户能够依照自己的分析目标去发现各个颗粒度的数据与关系
@ -27,26 +27,26 @@ order: 1
不同的业务场景具有不同的交互，但又有相通的交互部分。G6 依照目前的经验沉淀，将通用的部分作为全局交互以供自由配置，具备业务特性的部分则作为扩展模板以供参照使用。
- 通用交互，剥离了业务属性，是一套适应大部分关系图交互探索的基础工具箱，并将范围圈定在了基础键鼠操作内，令普通电脑用户也能迅速地利用其对数据进行探索
- 扩展交互，不一定适应所有的应用场景与业务属性，但承载了 G6 强大的扩展性与能力，其范围不受限制，既可以是普通的交互行为触发，也能被其他事件触发，亦或由实时的业务数据触发等，用户能通过这些交互对数据进行更深度更定制化的探索
操作对象可以分为画布、节点、Combo、边和其他四部分，所有的交互根据不同的操作对象进行分类。
- 扩展交互，不一定适应所有的应用场景与业务属性，但承载了 G6 强大的扩展性与能力，其范围不受限制，既可以是普通的交互行为触发，也能被其他事件触发，亦或由实时的业务数据触发等，用户能通过这些交互对数据进行更深度更定制化的探索。
- 操作对象可以分为画布、节点、Combo、边和其他四部分，所有的交互根据不同的操作对象进行分类。
### 画布 Canvas
#### 通用交互
| **通用交互** | **触发** | **演示** |
| :--- | :--- | --- |
| 缩放画布 | 🖱 鼠标：滚轮向上/向下 <br /> ⌨️ 键盘：「⌘(Ctrl)」+「+/-」 <br /> 💻 触控板：双指展开/合并 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*_5oISaHHhcMAAAAAAAAAAAAAARQnAQ' width='200' /> |
| 移动画布 | 🖱鼠标：拖拽 <br /> 💻触控板：双指移动 <br /> 🖱键鼠：Space键+拖拽（当与框选操作冲突时） | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*XqFMQZEHwHEAAAAAAAAAAAAAARQnAQ' width='200' /> |
| 回到概览 | ⌨️键盘：「Ctrl/⌘」+「1」 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*GmJLSIMnw24AAAAAAAAAAAAAARQnAQ' width='200' /> |
| 缩放画布 | 🖱 鼠标：滚轮向上/向下 <br /> ⌨️ 键盘：「⌘(Ctrl)」+「+/-」 <br /> 💻 触控板：双指展开/合并 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*_5oISaHHhcMAAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
| 移动画布 | 🖱鼠标：拖拽 <br /> 💻触控板：双指移动 <br /> 🖱键鼠：Space键+拖拽（当与框选操作冲突时） | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*XqFMQZEHwHEAAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
| 回到概览 | ⌨️键盘：「Ctrl/⌘」+「1」 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*GmJLSIMnw24AAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
#### 扩展交互
| **扩展交互** | **触发** | **演示** |
| --- | --- | --- |
| 鱼眼 | 🎚专用控件 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*FSt4SYyvmZAAAAAAAAAAAAAAARQnAQ' width='200' /> |
| 布局切换 | 🎚专用控件 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*TzjdTbNDss4AAAAAAAAAAAAAARQnAQ' width='200' /> |
| 时序过滤 | 🎚 专用控件 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*sHktSpkzVWkAAAAAAAAAAAAAARQnAQ' width='200' /> |
| 边过滤 | 🎚 专用控件 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*BrC_SYkxiK8AAAAAAAAAAAAAARQnAQ' width='200' /> |
| 缩略图 | 🎚 专用控件 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*y1NPRZkIFXQAAAAAAAAAAAAAARQnAQ' width='200' /> |
| 鱼眼 | 🎚专用控件 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*FSt4SYyvmZAAAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
| 布局切换 | 🎚专用控件 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*TzjdTbNDss4AAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
| 时序过滤 | 🎚 专用控件 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*sHktSpkzVWkAAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
| 边过滤 | 🎚 专用控件 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*BrC_SYkxiK8AAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
| 缩略图 | 🎚 专用控件 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*y1NPRZkIFXQAAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
### 节点 Node
@ -54,21 +54,21 @@ order: 1
| **通用交互** | **触发** | **演示** |
| :--- | :--- | --- |
| 指向节点 | 🖱鼠标：悬停 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*49DDTpvSH24AAAAAAAAAAAAAARQnAQ' width='200' /> |
| 选中节点 | 🖱鼠标：单击 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*CiB9SY2GrgYAAAAAAAAAAAAAARQnAQ' width='200' /> |
| 探索节点 | 🖱鼠标：双击 <br /> ⌨️ 键盘：Enter | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ib3kTpoMtsgAAAAAAAAAAAAAARQnAQ' width='200' /> |
| 取消选中 | 🖱鼠标：单击空白区域 <br /> ⌨️ 键盘：Esc | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*QAD9S6YX3ScAAAAAAAAAAAAAARQnAQ' width='200' /> |
| 指向节点 | 🖱鼠标：悬停 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*49DDTpvSH24AAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
| 选中节点 | 🖱鼠标：单击 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*CiB9SY2GrgYAAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
| 探索节点 | 🖱鼠标：双击 <br /> ⌨️ 键盘：Enter | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ib3kTpoMtsgAAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
| 取消选中 | 🖱鼠标：单击空白区域 <br /> ⌨️ 键盘：Esc | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*QAD9S6YX3ScAAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
#### 扩展交互
| **扩展交互** | **触发** | **演示** |
| --- | --- | --- |
| 多选节点 | ⌨️🖱键鼠：Shift + 长按移动 <br /> ⌨️🖱键鼠：Shift + 单击 <br /> 🖱鼠标：长按移动（当与拖拽画布操作不冲突时） <br /> 🎚控件：套索 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*R_gRS7We1OsAAAAAAAAAAAAAARQnAQ' width='200' /> <br /> <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*U-3RTZYZGuoAAAAAAAAAAAAAARQnAQ' width='200' /> <br /> <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*wRPnQYcQZeIAAAAAAAAAAAAAARQnAQ' width='200' /> |
| 移动节点 | 🖱鼠标：拖拽 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*7vPdS6r6rOsAAAAAAAAAAAAAARQnAQ' width='200' /> |
| 改变节点层级 | 🖱鼠标：拖拽 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*nZFwQ5ZyRtcAAAAAAAAAAAAAARQnAQ' width='200' /> <br /> <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*nYw8Rab5f9wAAAAAAAAAAAAAARQnAQ' width='200' /> |
| 高亮相邻节点 | 📃 事件：选中节点 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*UD-YTJdWc6oAAAAAAAAAAAAAARQnAQ' width='200' /> |
| 高亮最短路径 | 🎚专用控件 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*c18tRIO5DhAAAAAAAAAAAAAAARQnAQ' width='200' /> |
| 多选节点 | ⌨️🖱键鼠：Shift + 长按移动 <br /> ⌨️🖱键鼠：Shift + 单击 <br /> 🖱鼠标：长按移动（当与拖拽画布操作不冲突时） <br /> 🎚控件：套索 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*R_gRS7We1OsAAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> <br /> <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*U-3RTZYZGuoAAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> <br /> <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*wRPnQYcQZeIAAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
| 移动节点 | 🖱鼠标：拖拽 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*7vPdS6r6rOsAAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
| 改变节点层级 | 🖱鼠标：拖拽 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*nZFwQ5ZyRtcAAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> <br /> <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*nYw8Rab5f9wAAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
| 高亮相邻节点 | 📃 事件：选中节点 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*UD-YTJdWc6oAAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
| 高亮最短路径 | 🎚专用控件 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*c18tRIO5DhAAAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
### 边 Edge
@ -76,15 +76,15 @@ order: 1
| **通用交互** | **触发** | **演示** |
| :--- | :--- | --- |
| 指向边 | 🖱鼠标：悬停 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*M_JRSpYs41UAAAAAAAAAAAAAARQnAQ' width='200' /> |
| 选中边 | 🖱鼠标：单击 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*XWf4QY3T1-UAAAAAAAAAAAAAARQnAQ' width='200' /> |
| 取消选中 | 🖱鼠标：单击空白区域 <br /> 键盘：Esc | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ZpPCTIEv_P0AAAAAAAAAAAAAARQnAQ' width='200' /> |
| 指向边 | 🖱鼠标：悬停 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*M_JRSpYs41UAAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
| 选中边 | 🖱鼠标：单击 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*XWf4QY3T1-UAAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
| 取消选中 | 🖱鼠标：单击空白区域 <br /> 键盘：Esc | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ZpPCTIEv_P0AAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
#### 扩展交互
| **扩展交互** | **触发** | **演示** |
| :--- | :--- | --- |
| 多选边 | ⌨️🖱键鼠：Shift + 单击 <br /> ⌨️🖱键鼠：Shift + 长按移动 <br /> 🖱鼠标：长按移动（当与拖拽画布操作不冲突时） | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*0sbEQ4MwGaEAAAAAAAAAAAAAARQnAQ' width='200' /> |
| 多选边 | ⌨️🖱键鼠：Shift + 单击 <br /> ⌨️🖱键鼠：Shift + 长按移动 <br /> 🖱鼠标：长按移动（当与拖拽画布操作不冲突时） | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*0sbEQ4MwGaEAAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
### 组 Combo
@ -92,19 +92,19 @@ order: 1
| **通用交互** | **触发** | **演示** |
| :--- | :--- | --- |
| 指向 Combo | 🖱鼠标：悬停 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*38e4S7Es9HQAAAAAAAAAAAAAARQnAQ' width='200' /> |
| 选中 Combo | 🖱鼠标：单击 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*XYQNTa7-VP8AAAAAAAAAAAAAARQnAQ' width='200' /> |
| 展开/收起 Combo | 🖱鼠标：双击 <br /> 键盘：Enter <br /> 🎚专用控件 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ONVySZjGT0wAAAAAAAAAAAAAARQnAQ' width='200' /> |
| 取消选中 Combo | 🖱鼠标：单击空白区域 <br /> 键盘：Esc | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*EjPSR7zXdwsAAAAAAAAAAAAAARQnAQ' width='200' /> |
| 指向 Combo | 🖱鼠标：悬停 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*38e4S7Es9HQAAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
| 选中 Combo | 🖱鼠标：单击 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*XYQNTa7-VP8AAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
| 展开/收起 Combo | 🖱鼠标：双击 <br /> 键盘：Enter <br /> 🎚专用控件 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ONVySZjGT0wAAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
| 取消选中 Combo | 🖱鼠标：单击空白区域 <br /> 键盘：Esc | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*EjPSR7zXdwsAAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
#### 扩展交互
| **扩展交互** | **触发** | **演示** |
| --- | --- | --- |
| 多选 Combo | ⌨️🖱键鼠：Shift + 单击 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*283LT65gBx8AAAAAAAAAAAAAARQnAQ' width='200' /> |
| 移动 Combo | 🖱鼠标：拖拽 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*KJ_1SIVlGQMAAAAAAAAAAAAAARQnAQ' width='200' /> |
| 改变 Combo 层级 | 🖱鼠标：拖拽 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*DpQSQpHc8EUAAAAAAAAAAAAAARQnAQ' width='200' /> |
| 多选 Combo | ⌨️🖱键鼠：Shift + 单击 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*283LT65gBx8AAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
| 移动 Combo | 🖱鼠标：拖拽 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*KJ_1SIVlGQMAAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
| 改变 Combo 层级 | 🖱鼠标：拖拽 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*DpQSQpHc8EUAAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
## 快捷操作
@ -113,9 +113,9 @@ order: 1
| **通用交互** | **触发** | **演示** |
| :--- | :--- | --- |
| 撤销 | ⌨️ 键盘：「Ctrl/⌘」+「z」 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*QeZmS69JMAkAAAAAAAAAAAAAARQnAQ' width='200' /> |
| 重做 | ⌨️ 键盘：「Ctrl/⌘」+「Shift」+「z」 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*0EEjQaOylVIAAAAAAAAAAAAAARQnAQ' width='200' /> |
| 右键菜单 | 🖱鼠标：右键单击 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*9z8MTqE_xTEAAAAAAAAAAAAAARQnAQ' width='200' /> <br /> <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*dhWPSLIBwhgAAAAAAAAAAAAAARQnAQ' width='200' /> |
| 撤销 | ⌨️ 键盘：「Ctrl/⌘」+「z」 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*QeZmS69JMAkAAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
| 重做 | ⌨️ 键盘：「Ctrl/⌘」+「Shift」+「z」 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*0EEjQaOylVIAAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
| 右键菜单 | 🖱鼠标：右键单击 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*9z8MTqE_xTEAAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> <br /> <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*dhWPSLIBwhgAAAAAAAAAAAAAARQnAQ' width='200' style='max-height: 200px' /> |
## 交互模式

23
examples/case/australiaFire/demo/index.js
View File

@ -5,13 +5,6 @@ import insertCss from 'insert-css';
// 推荐将样式添加到自己的样式文件中
// 若拷贝官方代码，别忘了 npm install insert-css
insertCss(`
#container{
width: 700px;
height: 700px;
}
#container canvas{
background: rgb(0, 0, 0);
}
#legendContainer{
position: absolute;
top: 50px;
@ -229,10 +222,14 @@ const tooltip = new G6.Tooltip({
fetch('https://gw.alipayobjects.com/os/basement_prod/d676014a-0a11-4ea9-9af4-4038bae3c0a1.json')
.then((res) => res.json())
.then((data) => {
const container = document.getElementById('container');
const width = document.getElementById('container').scrollWidth;
const height = document.getElementById('container').scrollHeight || 500;
container.style.backgroundColor = '#000';
const graph = new G6.TreeGraph({
container: 'container',
width,
height,
width: height < width ? height : width,
height: height < width ? height : width,
fitView: true,
fitViewPadding: 80,
linkCenter: true,
@ -349,6 +346,14 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/d676014a-0a11-4ea9-9af4-403
graph.setItemState(node, 'hover', false);
});
});
if (typeof window !== 'undefined')
window.onresize = () => {
if (!graph || graph.get('destroyed')) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
graph.changeSize(container.scrollWidth, container.scrollHeight);
};
});
const legendContainer = document.createElement('div');

2
package.json
View File

@ -92,7 +92,7 @@
"devDependencies": {
"@antv/chart-node-g6": "^0.0.3",
"@antv/g-webgpu-compiler": "^0.5.0",
"@antv/gatsby-theme-antv": "^1.0.0-beta.15",
"@antv/gatsby-theme-antv": "^1.0.2",
"@babel/core": "^7.7.7",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/preset-react": "^7.7.4",