docs: update screenshots for new demos.

examples/item/multiEdge/demo/meta.json

@@ -5,20 +5,12 @@
   },
   "demos": [
     {
-      "filename": "nodeBg.js",
+      "filename": "multiEdges.js",
       "title": {
-        "zh": "设置节点文本背景",
+        "zh": "两节点间存在多条边",
-        "en": "Set Node Label Background"
+        "en": "Multiple Edges Between 2 Nodes"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*m5ABT5ra4w4AAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*g2p_Qa_wZcIAAAAAAAAAAABkARQnAQ"
-    },
-    {
-      "filename": "edgeBg.js",
-      "title": {
-        "zh": "设置边上文本背景",
-        "en": "Set Edge label Background"
-      },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*w_bNSZTlPXUAAAAAAAAAAABkARQnAQ"
     }
   ]
 }

examples/tool/tooltip/demo/meta.json

@@ -18,7 +18,7 @@
         "zh": "局部图形响应提示框",
         "en": "Local Tooltip"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*kjsSQ5pgVmoAAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*7eCgR6DTI_IAAAAAAAAAAABkARQnAQ"
     },
     {
       "filename": "tooltipLocalCustom.js",
@@ -26,7 +26,7 @@
         "zh": "局部图形响应提示框-自定义节点",
         "en": "Local Tooltip"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*kjsSQ5pgVmoAAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*bIHUToKq6OYAAAAAAAAAAABkARQnAQ"
     }
   ]
 }

examples/tool/tooltip/demo/tooltipLocal.js

@@ -23,15 +23,15 @@ const data = {
       subdescription: 'This is subdescription of node-0.',
     },
     {
-      id: '2',
+      id: '1',
-      label: 'hover the label - node 1',
+      label: 'No Tooltip - node 1',
       x: 150,
       y: 310,
       description: 'This is node-1.',
       subdescription: 'This is subdescription of node-1.',
     },
     {
-      id: '3',
+      id: '2',
       label: 'hover the label - node 2',
       x: 320,
       y: 310,
@@ -41,23 +41,17 @@ const data = {
   ],
   edges: [
     {
-      id: 'e0',
+      id: 'e1',
       source: '0',
       target: '1',
       description: 'This is edge from node 0 to node 1.',
     },
     {
-      id: 'e1',
+      id: 'e2',
       source: '0',
       target: '2',
       description: 'This is edge from node 0 to node 2.',
     },
-    {
-      id: 'e2',
-      source: '0',
-      target: '3',
-      description: 'This is edge from node 0 to node 3.',
-    },
   ],
 };
 const descriptionDiv = document.createElement('div');
@@ -95,8 +89,9 @@ const graph = new G6.Graph({
           const text = 'description: ' + model.description;
           return text;
         },
-        offset: 30,
+        offset: 20,
         shouldBegin: (e) => {
+          if (e.item.getModel().id === '1') return false;
           const div = document.getElementsByClassName('g6-tooltip')[0];
           if (div) div.style.display = 'none';
           return true;

examples/tool/tooltip/demo/tooltipLocalCustom.js

@@ -1,6 +1,9 @@
 import G6 from '@antv/g6';
 import insertCss from 'insert-css';
 
+// 我们用 insert-css 演示引入自定义样式
+// 推荐将样式添加到自己的样式文件中
+// 若拷贝官方代码，别忘了 npm install insert-css
 insertCss(`
   .g6-tooltip {
     border: 1px solid #e2e2e2;
@@ -67,7 +70,7 @@ const data = {
     },
     {
       id: '2',
-      label: 'B',
+      label: 'No Tooltip',
       x: 150,
       y: 310,
       description: 'This is node B.',
@@ -134,6 +137,7 @@ const graph = new G6.Graph({
         },
         offset: 30,
         shouldBegin: (e) => {
+          if (e.item.getModel().id === '2') return false;
           const div = document.getElementsByClassName('g6-tooltip')[0];
           if (div) div.style.display = 'none';
           return true;

examples/tree/compactBox/demo/compactBoxLeftAlign.js

@@ -72,7 +72,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
     const graphDiv = document.getElementById('container');
     const descriptionDiv = document.createElement('div');
     descriptionDiv.innerHTML =
-      'The nodes of a subtree is align to the left.';
+      'The nodes of a subtree is aligned to the left.';
     graphDiv.appendChild(descriptionDiv);
 
     const width = graphDiv.scrollWidth;

examples/tree/compactBox/demo/meta.json

@@ -23,10 +23,10 @@
     {
       "filename": "compactBoxLeftAlign.js",
       "title": {
-        "zh": "节点左对齐的紧凑书",
+        "zh": "节点左对齐的紧凑树",
         "en": "CompactBox with Left Align Nodes"
       },
-      "screenshot": ""
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*b3G-QZZekE8AAAAAAAAAAABkARQnAQ"
     }
   ]
 }