diff --git a/docs/api/Graph.en.md b/docs/api/Graph.en.md
index 626c46ae33..72f2f2d6b7 100644
--- a/docs/api/Graph.en.md
+++ b/docs/api/Graph.en.md
@@ -208,7 +208,7 @@ Change the data source, and render the graph according to the new data.
 
 | Name | Type | Required | Description |
 | --- | --- | --- | --- |
-| data | Object | true | Graph data, it should be an object containing an array of nodes and an array of edges. |
+| data | Object | false | Graph data, it should be an object containing an array of nodes and an array of edges. If it is not assigned, the graph will be re-rendered with the current data on the graph |
 
 **Usage**
 
@@ -234,6 +234,9 @@ const data = {
 
 // graph is an instance of Graph
 graph.changeData(data);
+
+// If there is no parameter, the graph will be re-rendered with the current data on the graph
+graph.changeData();
 ```
 
 ### collapseGroup(groupId)
@@ -1471,6 +1474,35 @@ graph.set('customGroup', group);
 graph.set('nodeIdList', [1, 3, 5]);
 ```
 
+
+
+### downloadFullImage(name, imageConfig)
+
+Export the whole graph as an image, whatever (a part of) the graph is out of the screen.
+
+**Parameters**
+
+| Name | Type   | Required | Description            |
+| ---- | ------ | -------- | ---------- |
+| name | String | false     | The name of the image. 'graph' by default. |
+| imageConfig | Object | false     | The configuration for the exported image, detials are shown below |
+
+where the `imageConfig` is the configuration for exported image:
+
+| Name | Type   | Required | Description            |
+| ---- | ------ | -------- | ---------- |
+| backgroundColor | String | false     | The background color of the image. If it is not assigned, the background will be transparent. |
+| padding | Number / Number[] | false     | The top, right, bottom, right paddings of the exported image. When its type is number, the paddings around the graph are the same |
+
+**Usage**
+
+```javascript
+graph.downloadFullImage('tree-graph', {
+  backgroundColor: '#ccc',
+  padding: [30, 15, 15, 15]
+});
+```
+
 ### downloadImage(name, backgroundColor)
 
 Export the canvas as an image.
@@ -1479,7 +1511,7 @@ Export the canvas as an image.
 
 | Name | Type   | Required | Description            |
 | ---- | ------ | -------- | ---------------------- |
-| name | String | false     | The name of the image. 'image' by default. |
+| name | String | false     | The name of the image. 'graph' by default. |
 | backgroundColor | String | false     | The background color of the image. If it is not assigned, the background will be transparent. |
 
 **Usage**
diff --git a/docs/api/Graph.zh.md b/docs/api/Graph.zh.md
index c11a718d46..d1babc84d6 100644
--- a/docs/api/Graph.zh.md
+++ b/docs/api/Graph.zh.md
@@ -210,7 +210,7 @@ graph.read(data);
 
 | 名称 | 类型   | 是否必选 | 描述                                     |
 | ---- | ------ | -------- | ---------------------------------------- |
-| data | Object | true     | 图数据，是一个包括 nodes 和 edges 的对象 |
+| data | Object | false     | 图数据，是一个包括 nodes 和 edges 的对象。若不指定该参数，则使用当前数据重新渲染 |
 
 **用法**
 
@@ -236,6 +236,8 @@ const data = {
 
 // graph是Graph的实例
 graph.changeData(data);
+// 若不指定该参数，则使用当前图上的数据重新渲染
+graph.changeData();
 ```
 
 ### collapseGroup(groupId)
@@ -1474,6 +1476,35 @@ graph.set('customGroup', group);
 graph.set('nodeIdList', [1, 3, 5]);
 ```
 
+
+### downloadFullImage(name, imageConfig)
+
+将画布上的元素导出为图片。
+
+**参数**
+
+| 名称 | 类型   | 是否必选 | 描述       |
+| ---- | ------ | -------- | ---------- |
+| name | String | false     | 图片的名称，不指定则为 'graph' |
+| imageConfig | Object | false     | 图片的配置项，可选，具体字段见下方 |
+
+其中，imageConfig 为导出图片的配置参数：
+
+| 名称 | 类型   | 是否必选 | 描述       |
+| ---- | ------ | -------- | ---------- |
+| backgroundColor | String | false     | 图片的背景色，可选，不传值时将导出透明背景的图片 |
+| padding | Number / Number[] | false     | 导出图片的上左下右 padding 值。当 `padding` 为 number 类型时，四周 `padding` 相等 |
+
+**用法**
+
+```javascript
+graph.downloadFullImage('tree-graph', {
+  backgroundColor: '#ccc',
+  padding: [30, 15, 15, 15]
+});
+```
+
+
 ### downloadImage(name, backgroundColor)
 
 将画布上的元素导出为图片。
@@ -1482,7 +1513,7 @@ graph.set('nodeIdList', [1, 3, 5]);
 
 | 名称 | 类型   | 是否必选 | 描述       |
 | ---- | ------ | -------- | ---------- |
-| name | String | true     | 图片的名称 |
+| name | String | false     | 图片的名称，不指定则为 'graph' |
 | backgroundColor | String | false     | 图片的背景色，可选，不传值时将导出透明背景的图片 |
 
 **用法**
diff --git a/docs/manual/middle/states/defaultBehavior.en.md b/docs/manual/middle/states/defaultBehavior.en.md
index a37555423a..576fce391f 100644
--- a/docs/manual/middle/states/defaultBehavior.en.md
+++ b/docs/manual/middle/states/defaultBehavior.en.md
@@ -131,7 +131,8 @@ With the configuration above, users are allowed to select more than one nodes wh
 
 - Description: The tooltip for node;
 - `type: 'tooltip'`;
-- `formatText(model)`: Format function, returns a text string or an HTML element.
+- `formatText(model)`: Format function, returns a text string or an HTML element;
+- `offset`：the offset of the tooltip to the mouse.
 
 ```javascript
 const graph = new G6.Graph({
@@ -145,6 +146,7 @@ const graph = new G6.Graph({
         formatText(model) {
           return model.xxx;
         },
+        offset: 10
       },
     ],
   },
@@ -169,7 +171,8 @@ The usage of edge-tooltip is similar to tooltip. It will be activated when the u
 
 - Description: The tooltip for edge;
 - `type: 'edge-tooltip'`;
-- `formatText(model)`: Format function, returns a text string or an HTML element.
+- `formatText(model)`: Format function, returns a text string or an HTML element;
+- `offset`：the offset of the tooltip to the mouse.
 
 ### activate-relations
 
diff --git a/docs/manual/middle/states/defaultBehavior.zh.md b/docs/manual/middle/states/defaultBehavior.zh.md
index 196aaa7047..c4bb3b5e7d 100644
--- a/docs/manual/middle/states/defaultBehavior.zh.md
+++ b/docs/manual/middle/states/defaultBehavior.zh.md
@@ -136,6 +136,7 @@ const graph = new G6.Graph({
 - 含义：节点文本提示；
 - `type: 'tooltip'`；
 - `formatText(model)`：格式化函数，可以返回文本或者 HTML；
+- `offset`：tooltip 距离鼠标的偏移量。
 
 ```javascript
 const graph = new G6.Graph({
@@ -149,6 +150,7 @@ const graph = new G6.Graph({
         formatText(model) {
           return model.xxx;
         },
+        offset: 10
       },
     ],
   },
@@ -173,7 +175,8 @@ const graph = new G6.Graph({
 
 - 含义：边文本提示；
 - `type: 'edge-tooltip'`；
-- `formatText(model)`：格式化函数，可以返回文本或者 HTML。
+- `formatText(model)`：格式化函数，可以返回文本或者 HTML；
+- `offset`：tooltip 距离鼠标的偏移量。
 
 ### activate-relations
 
diff --git a/docs/manual/tutorial/plugins.en.md b/docs/manual/tutorial/plugins.en.md
index d352397367..3c23ebab1d 100644
--- a/docs/manual/tutorial/plugins.en.md
+++ b/docs/manual/tutorial/plugins.en.md
@@ -71,7 +71,7 @@ Interaction tools assist user interact a graph. Two steps are required: <br /> 
 
 ### Tooltip for Node
 
-Node tooltip shows the detail information when mouse enters a node.
+Node tooltip shows the detail information when mouse enters a node. More configurations are in [Built-in tooltip](/en/docs/manual/middle/states/defaultBehavior#tooltip).
 
 **Expected Effect**
 
@@ -123,7 +123,7 @@ Actually, tooltip is a floating `<div>` tag of HTML. Thus, you can define the CS
 
 ### Tooltip for Edge
 
-Edge tooltip shows the detail information when mouse enters a edge.
+Edge tooltip shows the detail information when mouse enters a edge. More configurations are in [Built-in edge-tooltip](/en/docs/manual/middle/states/defaultBehavior#edge-tooltip).
 
 **Expected Effect**
 
diff --git a/docs/manual/tutorial/plugins.zh.md b/docs/manual/tutorial/plugins.zh.md
index b2aa56807e..7790ddae4f 100644
--- a/docs/manual/tutorial/plugins.zh.md
+++ b/docs/manual/tutorial/plugins.zh.md
@@ -71,7 +71,7 @@ const graph = new G6.Graph({
 
 ### tooltip 节点提示框
 
-节点提示框可以用在边的详细信息的展示。当鼠标滑过节点时，显示一个浮层告知节点的详细信息。
+节点提示框可以用在边的详细信息的展示。当鼠标滑过节点时，显示一个浮层告知节点的详细信息。更多配置参见 [内置交互 tooltip](/zh/docs/manual/middle/states/defaultBehavior#tooltip)。
 
 **预期效果**
 
@@ -123,7 +123,9 @@ const graph = new G6.Graph({
 
 ### edge-tooltip 边提示框
 
-边提示框可以用在边的详细信息的展示。当鼠标滑过边时，显示一个浮层告知边的详细信息。 **预期效果**
+边提示框可以用在边的详细信息的展示。当鼠标滑过边时，显示一个浮层告知边的详细信息。更多配置参见 [内置交互 edge-tooltip](/zh/docs/manual/middle/states/defaultBehavior#edge-tooltip)。
+
+**预期效果**
 
 <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Uk10SYFNNi8AAAAAAAAAAABkARQnAQ' width=300 />
 
diff --git a/examples/interaction/highlight/demo/activateRelations.js b/examples/interaction/highlight/demo/activateRelations.js
index 50e5735a14..a4b1286703 100644
--- a/examples/interaction/highlight/demo/activateRelations.js
+++ b/examples/interaction/highlight/demo/activateRelations.js
@@ -31,6 +31,7 @@ const graph = new G6.Graph({
         formatText: function formatText(model) {
           return model.name;
         },
+        offset: 30
       },
       {
         type: 'edge-tooltip',
@@ -43,6 +44,7 @@ const graph = new G6.Graph({
             edge.getTarget().getModel().name
           );
         },
+        offset: 30
       },
       'activate-relations',
     ],
diff --git a/examples/interaction/highlight/demo/highlightDark.js b/examples/interaction/highlight/demo/highlightDark.js
index f4ff2272e4..e64a707604 100644
--- a/examples/interaction/highlight/demo/highlightDark.js
+++ b/examples/interaction/highlight/demo/highlightDark.js
@@ -31,6 +31,7 @@ const graph = new G6.Graph({
         formatText: function formatText(model) {
           return model.name;
         },
+        offset: 30
       },
       {
         type: 'edge-tooltip',
@@ -43,6 +44,7 @@ const graph = new G6.Graph({
             edge.getTarget().getModel().name
           );
         },
+        offset: 30
       },
     ],
   },
diff --git a/examples/net/forceDirected/demo/basicForceDirected.js b/examples/net/forceDirected/demo/basicForceDirected.js
index 140282a650..2e0d90474b 100644
--- a/examples/net/forceDirected/demo/basicForceDirected.js
+++ b/examples/net/forceDirected/demo/basicForceDirected.js
@@ -37,6 +37,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json')
 
     const forceLayout = graph.get('layoutController').layoutMethod;
     graph.on('node:dragstart', function(e) {
+      graph.layout()
       refreshDragedNodePosition(e);
     });
     graph.on('node:drag', function(e) {