docs: update decision tree demo and tooltip demos

examples/case/australiaFire/index.en.md

@@ -1,6 +1,6 @@
 ---
 title: Australia Fire
-order: 6
+order: 7
 ---
 
 This graph demonstrates the fire affectness and population on different cities of Australia. The data comes from NASA, which includes the fire points of Australia detected by the satellites. [Link of the data](https://firms.modaps.eosdis.nasa.gov/active_fire/#firms-shapefile).

examples/case/australiaFire/index.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 澳大利亚大火
-order: 6
+order: 7
 ---
 
 本图展示了 2020 年 1 月 11 日到 18 日的火灾情况，数据来源于 NASA 公开数据，由卫星拍摄到的起火点。[数据链接](https://firms.modaps.eosdis.nasa.gov/active_fire/#firms-shapefile)。

examples/case/christmasBubbles/index.en.md

@@ -1,6 +1,6 @@
 ---
 title: Top 100 Words at Christmas
-order: 1
+order: 3
 ---
 
 This demo shows the top 100 hot words on Tweeter at Christmas eve and Christmas day. You can drag and click the nodes to explore the context of the top words.

examples/case/christmasBubbles/index.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 圣诞推文可视化
-order: 1
+order: 3
 ---
 
 该案例展示了圣诞夜与圣诞节网友们在 Tweeter 上发送的推文中，出现频率 top 100 的单词。可以通过拖拽、点击等交互，查看单词的上下文。

examples/case/customFlow/index.en.md

@@ -1,6 +1,6 @@
 ---
 title: Custom Fow Graph
-order: 5
+order: 1
 ---
 
 Custom flow graph.

examples/case/customFlow/index.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 自定义流向图
-order: 5
+order: 1
 ---
 
 自定义流向图。

examples/case/metroLines/index.en.md

@@ -1,6 +1,6 @@
 ---
 title: Animated Metro Map
-order: 4
+order: 5
 ---
 
 Metro map with animated edges.

examples/case/metroLines/index.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 地铁线路图
-order: 4
+order: 5
 ---
 
 基于 G6 实现的地铁线路图。

examples/case/simplifyCluster/index.en.md

@@ -1,6 +1,6 @@
 ---
 title: Collapse/Expand Cluster
-order: 3
+order: 4
 ---
 
 This demo shows interactively collapse and expand clusters with Fruchterman layout.

examples/case/simplifyCluster/index.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 聚类的折叠/扩展
-order: 3
+order: 4
 ---
 
 使用 Fruchterman 布局实现交互式折叠/扩展聚类。

examples/tool/tooltip/demo/tooltip.js

@@ -110,17 +110,20 @@ const graph = new G6.Graph({
   defaultNode: {
     size: [80, 40],
     type: 'rect',
-    style: {
-      fill: '#DEE9FF',
-      stroke: '#5B8FF9',
-    },
-  },
-  defaultEdge: {
-    style: {
-      stroke: '#b5b5b5',
-      lineAppendWidth: 3,
-    },
   },
 });
 graph.data(data);
 graph.render();
+
+graph.on('node:mouseenter', e => {
+  graph.setItemState(e.item, 'active', true)
+});
+graph.on('node:mouseleave', e => {
+  graph.setItemState(e.item, 'active', false)
+});
+graph.on('edge:mouseenter', e => {
+  graph.setItemState(e.item, 'active', true)
+});
+graph.on('edge:mouseleave', e => {
+  graph.setItemState(e.item, 'active', false)
+});

examples/tool/tooltip/demo/tooltipLocal.js

@@ -70,16 +70,8 @@ const graph = new G6.Graph({
   defaultNode: {
     size: [150, 50],
     type: 'rect',
-    style: {
-      fill: '#DEE9FF',
-      stroke: '#5B8FF9',
-    },
   },
   defaultEdge: {
-    style: {
-      stroke: '#b5b5b5',
-      lineAppendWidth: 3,
-    },
     labelCfg: {
       autoRotate: true,
 
@@ -117,3 +109,16 @@ const graph = new G6.Graph({
 });
 graph.data(data);
 graph.render();
+
+graph.on('node:mouseenter', e => {
+  graph.setItemState(e.item, 'active', true)
+});
+graph.on('node:mouseleave', e => {
+  graph.setItemState(e.item, 'active', false)
+});
+graph.on('edge:mouseenter', e => {
+  graph.setItemState(e.item, 'active', true)
+});
+graph.on('edge:mouseleave', e => {
+  graph.setItemState(e.item, 'active', false)
+});

examples/tool/tooltip/demo/tooltipLocalCustom.js

@@ -151,3 +151,16 @@ const graph = new G6.Graph({
 });
 graph.data(data);
 graph.render();
+
+graph.on('node:mouseenter', e => {
+  graph.setItemState(e.item, 'active', true)
+});
+graph.on('node:mouseleave', e => {
+  graph.setItemState(e.item, 'active', false)
+});
+graph.on('edge:mouseenter', e => {
+  graph.setItemState(e.item, 'active', true)
+});
+graph.on('edge:mouseleave', e => {
+  graph.setItemState(e.item, 'active', false)
+});

examples/tool/tooltip/demo/tooltipPlugin.js

@@ -1,6 +1,9 @@
 import G6 from '@antv/g6';
 import insertCss from 'insert-css';
 
+// 我们用 insert-css 演示引入自定义样式
+// 推荐将样式添加到自己的样式文件中
+// 若拷贝官方代码，别忘了 npm install insert-css
 // 我们用 insert-css 演示引入自定义样式
 // 推荐将样式添加到自己的样式文件中
 // 若拷贝官方代码，别忘了 npm install insert-css
@@ -71,8 +74,8 @@ const data = {
 const tooltip = new G6.Tooltip({
   // offsetX and offsetY include the padding of the parent container
   // offsetX 与 offsetY 需要加上父容器的 padding
-  offsetX: 16 + 10,
-  offsetY: 24 + 10,
+  offsetX: 140 + 10,
+  offsetY: 100 + 10,
   // the types of items that allow the tooltip show up
   // 允许出现 tooltip 的 item 类型
   itemTypes: ['node', 'edge'],
@@ -107,10 +110,6 @@ const graph = new G6.Graph({
   defaultNode: {
     size: [80, 40],
     type: 'rect',
-    style: {
-      fill: '#DEE9FF',
-      stroke: '#5B8FF9',
-    },
   },
   defaultEdge: {
     style: {
@@ -121,3 +120,16 @@ const graph = new G6.Graph({
 });
 graph.data(data);
 graph.render();
+
+graph.on('node:mouseenter', e => {
+  graph.setItemState(e.item, 'active', true)
+});
+graph.on('node:mouseleave', e => {
+  graph.setItemState(e.item, 'active', false)
+});
+graph.on('edge:mouseenter', e => {
+  graph.setItemState(e.item, 'active', true)
+});
+graph.on('edge:mouseleave', e => {
+  graph.setItemState(e.item, 'active', false)
+});

examples/tool/tooltip/demo/tooltipPluginLocal.js

@@ -131,19 +131,20 @@ const graph = new G6.Graph({
   defaultNode: {
     size: [80, 40],
     type: 'rect',
-    style: {
-      fill: '#DEE9FF',
-      stroke: '#5B8FF9',
-    },
-  },
-  defaultEdge: {
-    style: {
-      stroke: '#b5b5b5',
-      lineAppendWidth: 3,
-    },
   },
 });
 graph.data(data);
 graph.render();
 
-console.log(graph.getNodes()[0])
+graph.on('node:mouseenter', e => {
+  graph.setItemState(e.item, 'active', true)
+});
+graph.on('node:mouseleave', e => {
+  graph.setItemState(e.item, 'active', false)
+});
+graph.on('edge:mouseenter', e => {
+  graph.setItemState(e.item, 'active', true)
+});
+graph.on('edge:mouseleave', e => {
+  graph.setItemState(e.item, 'active', false)
+});

gatsby-config.js

@@ -237,6 +237,22 @@ module.exports = {
       }
     ],
     examples: [
+      {
+        slug: 'case',
+        icon: 'gallery',
+        title: {
+          zh: '场景案例',
+          en: 'Case',
+        },
+      },
+      {
+        slug: 'gallery',
+        icon: 'gallery',
+        title: {
+          zh: '所有图表',
+          en: 'All Demos',
+        },
+      },
       {
         slug: 'tree',
         icon: 'tree', // 图标名可以去 https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html 打开控制台查看图标类名
@@ -301,14 +317,6 @@ module.exports = {
           en: 'Algorithm',
         },
       },
-      {
-        slug: 'case',
-        icon: 'case',
-        title: {
-          zh: '复杂案例',
-          en: 'Case',
-        },
-      },
       {
         slug: 'performance',
         icon: 'net',

package.json

@@ -90,7 +90,7 @@
   },
   "devDependencies": {
     "@antv/chart-node-g6": "^0.0.3",
-    "@antv/gatsby-theme-antv": "^1.0.0-beta.11",
+    "@antv/gatsby-theme-antv": "^1.0.0-beta.15",
     "@babel/core": "^7.7.7",
     "@babel/plugin-proposal-class-properties": "^7.1.0",
     "@babel/preset-react": "^7.7.4",