add: screenshots for layout demos. feat: styles for layout demos.

2024-11-30 18:58:34 +08:00 · 2019-11-11 17:02:40 +08:00 · 2019-11-11 17:02:40 +08:00 · 73278080e9
commit 73278080e9
parent dcc4fe0907
35 changed files with 82 additions and 459 deletions
--- a/examples/net/arcDiagram/demo/meta.json
+++ b/examples/net/arcDiagram/demo/meta.json
@ -7,12 +7,12 @@
    {
      "filename": "basicArcDiagram.js",
      "title": "基本弧线图",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*gSeDQoY-CkoAAAAAAAAAAABkARQnAQ"
    },
    {
      "filename": "circularArcDiagram.js",
      "title": "环形弧线图",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*25hkTLuutXsAAAAAAAAAAABkARQnAQ"
    }
  ]
 }
--- a/examples/net/circular/demo/meta.json
+++ b/examples/net/circular/demo/meta.json
@ -7,32 +7,27 @@
    {
      "filename": "basicCircular.js",
      "title": "基本 Circular 布局",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*-3idTK1xa6wAAAAAAAAAAABkARQnAQ"
    },
    {
      "filename": "degreeCircular.js",
      "title": "按照节点度数排序的 Circular 布局",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
-    },
-    {
-      "filename": "topologyCircular.js",
-      "title": "按照拓扑结构排序的 Circular 布局",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*T8gtSIST4kwAAAAAAAAAAABkARQnAQ"
    },
    {
      "filename": "spiralCircular.js",
      "title": "螺旋线布局",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*6J6BRIjmXKAAAAAAAAAAAABkARQnAQ"
    },
    {
      "filename": "divisionCircular.js",
      "title": "分割环形布局",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*_nLORItzM5QAAAAAAAAAAABkARQnAQ"
    },
    {
      "filename": "circularConfigurationTranslate.js",
      "title": "Circular 布局参数动态变化",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*3qweSosywckAAAAAAAAAAABkARQnAQ"
    }
  ]
 }
--- a/examples/net/circular/demo/topologyCircular.js
+++ b/examples/net/circular/demo/topologyCircular.js
@ -1,326 +0,0 @@
-import G6 from '@antv/g6';
-
-const data = {
-  nodes: [{
-    id: '0',
-    label: '0'
-  }, {
-    id: '1',
-    label: '1'
-  }, {
-    id: '2',
-    label: '2'
-  }, {
-    id: '3',
-    label: '3'
-  }, {
-    id: '4',
-    label: '4'
-  }, {
-    id: '5',
-    label: '5'
-  }, {
-    id: '6',
-    label: '6'
-  }, {
-    id: '7',
-    label: '7'
-  }, {
-    id: '8',
-    label: '8'
-  }, {
-    id: '9',
-    label: '9'
-  }, {
-    id: '10',
-    label: '10'
-  }, {
-    id: '11',
-    label: '11'
-  }, {
-    id: '12',
-    label: '12'
-  }, {
-    id: '13',
-    label: '13'
-  }, {
-    id: '14',
-    label: '14'
-  }, {
-    id: '15',
-    label: '15'
-  }, {
-    id: '16',
-    label: '16'
-  }, {
-    id: '17',
-    label: '17'
-  }, {
-    id: '18',
-    label: '18'
-  }, {
-    id: '19',
-    label: '19'
-  }, {
-    id: '20',
-    label: '20'
-  }, {
-    id: '21',
-    label: '21'
-  }, {
-    id: '22',
-    label: '22'
-  }, {
-    id: '23',
-    label: '23'
-  }, {
-    id: '24',
-    label: '24'
-  }, {
-    id: '25',
-    label: '25'
-  }, {
-    id: '26',
-    label: '26'
-  }, {
-    id: '27',
-    label: '27'
-  }, {
-    id: '28',
-    label: '28'
-  }, {
-    id: '29',
-    label: '29'
-  }, {
-    id: '30',
-    label: '30'
-  }, {
-    id: '31',
-    label: '31'
-  }, {
-    id: '32',
-    label: '32'
-  }, {
-    id: '33',
-    label: '33'
-  }],
-  edges: [{
-    source: '0',
-    target: '1'
-  }, {
-    source: '0',
-    target: '2'
-  }, {
-    source: '0',
-    target: '3'
-  }, {
-    source: '0',
-    target: '4'
-  }, {
-    source: '0',
-    target: '5'
-  }, {
-    source: '0',
-    target: '7'
-  }, {
-    source: '0',
-    target: '8'
-  }, {
-    source: '0',
-    target: '9'
-  }, {
-    source: '0',
-    target: '10'
-  }, {
-    source: '0',
-    target: '11'
-  }, {
-    source: '0',
-    target: '13'
-  }, {
-    source: '0',
-    target: '14'
-  }, {
-    source: '0',
-    target: '15'
-  }, {
-    source: '0',
-    target: '16'
-  }, {
-    source: '2',
-    target: '3'
-  }, {
-    source: '4',
-    target: '5'
-  }, {
-    source: '4',
-    target: '6'
-  }, {
-    source: '5',
-    target: '6'
-  }, {
-    source: '7',
-    target: '13'
-  }, {
-    source: '8',
-    target: '14'
-  }, {
-    source: '9',
-    target: '10'
-  }, {
-    source: '10',
-    target: '22'
-  }, {
-    source: '10',
-    target: '14'
-  }, {
-    source: '10',
-    target: '12'
-  }, {
-    source: '10',
-    target: '24'
-  }, {
-    source: '10',
-    target: '21'
-  }, {
-    source: '10',
-    target: '20'
-  }, {
-    source: '11',
-    target: '24'
-  }, {
-    source: '11',
-    target: '22'
-  }, {
-    source: '11',
-    target: '14'
-  }, {
-    source: '12',
-    target: '13'
-  }, {
-    source: '16',
-    target: '17'
-  }, {
-    source: '16',
-    target: '18'
-  }, {
-    source: '16',
-    target: '21'
-  }, {
-    source: '16',
-    target: '22'
-  }, {
-    source: '17',
-    target: '18'
-  }, {
-    source: '17',
-    target: '20'
-  }, {
-    source: '18',
-    target: '19'
-  }, {
-    source: '19',
-    target: '20'
-  }, {
-    source: '19',
-    target: '33'
-  }, {
-    source: '19',
-    target: '22'
-  }, {
-    source: '19',
-    target: '23'
-  }, {
-    source: '20',
-    target: '21'
-  }, {
-    source: '21',
-    target: '22'
-  }, {
-    source: '22',
-    target: '24'
-  }, {
-    source: '22',
-    target: '25'
-  }, {
-    source: '22',
-    target: '26'
-  }, {
-    source: '22',
-    target: '23'
-  }, {
-    source: '22',
-    target: '28'
-  }, {
-    source: '22',
-    target: '30'
-  }, {
-    source: '22',
-    target: '31'
-  }, {
-    source: '22',
-    target: '32'
-  }, {
-    source: '22',
-    target: '33'
-  }, {
-    source: '23',
-    target: '28'
-  }, {
-    source: '23',
-    target: '27'
-  }, {
-    source: '23',
-    target: '29'
-  }, {
-    source: '23',
-    target: '30'
-  }, {
-    source: '23',
-    target: '31'
-  }, {
-    source: '23',
-    target: '33'
-  }, {
-    source: '32',
-    target: '33'
-  }]
-};
-
-const width = document.getElementById('container').scrollWidth;
-const height = document.getElementById('container').scrollHeight;
-const graph = new G6.Graph({
-  container: 'container',
-  width,
-  height,
-  fitView: true,
-  fitViewPadding: 40,
-  modes: {
-    default: [ 'drag-canvas', 'drag-node' ]
-  },
-  layout: {
-    type: 'circular',
-    ordering: 'topology'
-  },
-  animate: true,
-  defaultNode: {
-    size: 20,
-    style: {
-      lineWidth: 2,
-      fill: '#C6E5FF',
-      stroke: '#5B8FF9'
-    }
-  },
-  defaultEdge: {
-    size: 1,
-    color: '#e2e2e2',
-    style: {
-      endArrow: {
-        path: 'M 4,0 L -4,-4 L -4,4 Z',
-        d: 4
-      }
-    }
-  }
-});
-graph.data(data);
-graph.render();
--- a/examples/net/concentricLayout/demo/meta.json
+++ b/examples/net/concentricLayout/demo/meta.json
@ -7,7 +7,7 @@
    {
      "filename": "basicConcentric.js",
      "title": "基本 Concentric 同心圆布局",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*kpZJTr4WPNIAAAAAAAAAAABkARQnAQ"
    }
  ]
 }
--- a/examples/net/dagreFlow/demo/basicDagre.js
+++ b/examples/net/dagreFlow/demo/basicDagre.js
@ -220,7 +220,7 @@ const graph = new G6.Graph({
      if (d.id === '3') {
        return 500;
      }
-      return 20;
+      return 50;
    }
  },
  pixelRatio: 2,
--- a/examples/net/dagreFlow/demo/meta.json
+++ b/examples/net/dagreFlow/demo/meta.json
@ -7,17 +7,17 @@
    {
      "filename": "basicDagre.js",
      "title": "Dagre 流程图",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Ga-rRbMsNSoAAAAAAAAAAABkARQnAQ"
    },
    {
      "filename": "lrDagre.js",
      "title": "自左向右的 Dagre",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*-aYyT7T2it0AAAAAAAAAAABkARQnAQ"
    },
    {
      "filename": "dagreConfigurationTranslate.js",
      "title": "Dagre 布局参数动态变化",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*eNazTaP_XO0AAAAAAAAAAABkARQnAQ"
    }
  ]
 }
--- a/examples/net/forceDirected/demo/meta.json
+++ b/examples/net/forceDirected/demo/meta.json
@ -7,32 +7,32 @@
    {
      "filename": "basicForceDirected.js",
      "title": "基本力导向布局及节点拖拽",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Nt45Q6nnK2wAAAAAAAAAAABkARQnAQ"
    },
    {
      "filename": "forceDirectedPreventOverlap.js",
      "title": "力导向布局防止节点重叠",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*5xj5RKtHXs8AAAAAAAAAAABkARQnAQ"
    },
    {
      "filename": "forceDirectedFunctionalParams.js",
      "title": "定制不同节点的参数",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*NU_jQofTFGkAAAAAAAAAAABkARQnAQ"
    },
    {
      "filename": "basicForceDirectedDragFix.js",
      "title": "固定被拖拽节点",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*xEy8TJd2w1IAAAAAAAAAAABkARQnAQ"
    },
    {
      "filename": "forceDirectedConfigurationTranslate.js",
      "title": "力导向布局参数动态变化",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*3QXsQrxafVcAAAAAAAAAAABkARQnAQ"
    },
    {
      "filename": "forceBubbles.js",
      "title": "力导向气泡图",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*A-3wRYo954IAAAAAAAAAAABkARQnAQ"
    }
  ]
 }
--- a/examples/net/furchtermanLayout/demo/meta.json
+++ b/examples/net/furchtermanLayout/demo/meta.json
@ -7,17 +7,17 @@
    {
      "filename": "basicFruchterman.js",
      "title": "基本 Fruchterman 布局",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*jK3ITYqVJnQAAAAAAAAAAABkARQnAQ"
    },
    {
      "filename": "fruchtermanClustering.js",
      "title": "Fruchterman 聚类布局",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*p8ITTZMWY2UAAAAAAAAAAABkARQnAQ"
    },
    {
      "filename": "fruchtermanConfigurationTranslate.js",
      "title": "Fruchterman 布局参数动态变化",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*zhBbT4t2EcQAAAAAAAAAAABkARQnAQ"
    }
  ]
 }
--- a/examples/net/gridLayout/demo/meta.json
+++ b/examples/net/gridLayout/demo/meta.json
@ -7,17 +7,12 @@
    {
      "filename": "basicGrid.js",
      "title": "基本 Grid 网格布局",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*siQ8RIVYhaIAAAAAAAAAAABkARQnAQ"
    },
    {
      "filename": "clusterGrid.js",
      "title": "指定排序方式的网格布局",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
-    },
-    {
-      "filename": "fruchtermanConfigurationTranslate.js",
-      "title": "Fruchterman 布局参数动态变化",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*q1fIT7gtPLQAAAAAAAAAAABkARQnAQ"
    }
  ]
 }
--- a/examples/net/layoutMechanism/demo/customBigraph.js
+++ b/examples/net/layoutMechanism/demo/customBigraph.js
@ -208,7 +208,10 @@ const graph = new G6.Graph({
  animate: true,
  defaultNode: {
    size: 20,
-    color: 'steelblue'
+    style: {
+      fill: '#C6E5FF',
+      stroke: '#5B8FF9'
+    }
  },
  defaultEdge: {
    size: 1,
--- a/examples/net/layoutMechanism/demo/dataChange.js
+++ b/examples/net/layoutMechanism/demo/dataChange.js
@ -348,7 +348,8 @@ const graph = new G6.Graph({
    color: 'steelblue',
    style: {
      lineWidth: 2,
-      fill: '#fff'
+      fill: '#C6E5FF',
+      stroke: '#5B8FF9'
    }
  },
  defaultEdge: {
--- a/examples/net/layoutMechanism/demo/layoutTiming.js
+++ b/examples/net/layoutMechanism/demo/layoutTiming.js
@ -90,7 +90,10 @@ const graph = new G6.Graph({
  },
  defaultNode: {
    size: 20,
-    color: 'steelblue'
+    style: {
+      fill: '#C6E5FF',
+      stroke: '#5B8FF9'
+    }
  },
  defaultEdge: {
    size: 1,
--- a/examples/net/layoutMechanism/demo/meta.json
+++ b/examples/net/layoutMechanism/demo/meta.json
@ -7,22 +7,22 @@
    {
      "filename": "subgraphLayout.js",
      "title": "子图布局",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*NadiRqP0pdYAAAAAAAAAAABkARQnAQ"
    },
    {
      "filename": "dataChange.js",
      "title": "数据动态切换",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*VIXvQagCETkAAAAAAAAAAABkARQnAQ"
    },
    {
      "filename": "customBigraph.js",
      "title": "自定义二分图布局",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*h-aURK39er0AAAAAAAAAAABkARQnAQ"
    },
    {
      "filename": "layoutTiming.js",
      "title": "布局时机监听",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ds5zQrQzmLwAAAAAAAAAAABkARQnAQ"
    }
  ]
 }
--- a/examples/net/layoutMechanism/demo/subgraphLayout.js
+++ b/examples/net/layoutMechanism/demo/subgraphLayout.js
@ -293,7 +293,8 @@ nodes.forEach(function(node, i) {
  if (i <= 16 && i !== 12) {
    if (!node.style) {
      node.style = {
-        fill: 'lightsteelblue'
+        fill: '#F6C3B7',
+        stroke: '#E8684A'
      };
    } else {
      node.style.fill = 'lightsteelblue';
@ -314,7 +315,10 @@ const graph = new G6.Graph({
  },
  defaultNode: {
    size: 20,
-    color: 'steelblue'
+    style: {
+      fill: '#C6E5FF',
+      stroke: '#5B8FF9'
+    }
  },
  defaultEdge: {
    size: 1,
--- a/examples/net/mdsLayout/demo/basicMDS.js
+++ b/examples/net/mdsLayout/demo/basicMDS.js
@ -395,7 +395,10 @@ const graph = new G6.Graph({
  },
  defaultNode: {
    size: 20,
-    color: 'steelblue'
+    style: {
+      fill: '#C6E5FF',
+      stroke: '#5B8FF9'
+    }
  },
  defaultEdge: {
    size: 1,
--- a/examples/net/mdsLayout/demo/meta.json
+++ b/examples/net/mdsLayout/demo/meta.json
@ -7,7 +7,7 @@
    {
      "filename": "basicMDS.js",
      "title": "基本 MDS 布局",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*aUS7TJR2NHcAAAAAAAAAAABkARQnAQ"
    }
  ]
 }
--- a/examples/net/radialLayout/demo/meta.json
+++ b/examples/net/radialLayout/demo/meta.json
@ -7,27 +7,27 @@
    {
      "filename": "basicRadial.js",
      "title": "基本 Radial 辐射布局",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Ec_WQ5hqVsgAAAAAAAAAAABkARQnAQ"
    },
    {
      "filename": "preventOverlapRadial.js",
      "title": "防止节点重叠的严格辐射布局",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*GAFjRJeAoAsAAAAAAAAAAABkARQnAQ"
    },
    {
      "filename": "preventOverlapUnstrictRadial.js",
      "title": "防止节点重叠的非严格辐射布局",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*X8rzTZyWwUcAAAAAAAAAAABkARQnAQ"
    },
    {
      "filename": "interactRadial.js",
      "title": "交互扩展节点的辐射布局",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*F4OQQKc8l2IAAAAAAAAAAABkARQnAQ"
    },
    {
      "filename": "radialConfigurationTranslate.js",
      "title": "Radial 布局参数动态变化",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ikctQb9KECAAAAAAAAAAAABkARQnAQ"
    }
  ]
 }
--- a/examples/net/sankey/demo/meta.json
+++ b/examples/net/sankey/demo/meta.json
@ -7,7 +7,7 @@
    {
      "filename": "sankey.js",
      "title": "桑基图",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*fpoFQLhV_uIAAAAAAAAAAABkARQnAQ"
    }
  ]
 }
--- a/examples/tree/compactBox/demo/basicCompactBox.js
+++ b/examples/tree/compactBox/demo/basicCompactBox.js
@ -21,7 +21,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
        }, 'drag-canvas', 'zoom-canvas' ]
      },
      defaultNode: {
-        size: 16,
+        size: 26,
        anchorPoints: [[ 0, 0.5 ], [ 1, 0.5 ]],
        style: {
          fill: '#40a9ff',
@ -57,11 +57,6 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j

    graph.node(function(node) {
      return {
-        size: 26,
-        style: {
-          fill: '#40a9ff',
-          stroke: '#096dd9'
-        },
        label: node.id,
        labelCfg: {
          offset: 10,
--- a/examples/tree/compactBox/demo/meta.json
+++ b/examples/tree/compactBox/demo/meta.json
@ -7,12 +7,12 @@
    {
      "filename": "basicCompactBox.js",
      "title": "紧凑树",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*DAMtTIeTRywAAAAAAAAAAABkARQnAQ"
    }, 
    {
      "filename": "tbCompactBox.js",
      "title": "至上而下的紧凑树",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*4V6JRIqIIjUAAAAAAAAAAABkARQnAQ"
    }
  ]
 }
--- a/examples/tree/compactBox/demo/tbCompactBox.js
+++ b/examples/tree/compactBox/demo/tbCompactBox.js
@ -22,7 +22,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
        }, 'drag-canvas', 'zoom-canvas' ]
      },
      defaultNode: {
-        size: 16,
+        size: 26,
        anchorPoints: [[ 0, 0.5 ], [ 1, 0.5 ]],
        style: {
          fill: '#40a9ff',
@ -64,11 +64,6 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
        rotate = 90;
      }
      return {
-        size: 26,
-        style: {
-          fill: '#40a9ff',
-          stroke: '#096dd9'
-        },
        label: node.id,
        labelCfg: {
          position,
--- a/examples/tree/customItemTree/demo/meta.json
+++ b/examples/tree/customItemTree/demo/meta.json
@ -7,17 +7,17 @@
    {
      "filename": "treeEdgeLabel.js",
      "title": "树图边上的标签",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*o6L6Tqz_Fn4AAAAAAAAAAABkARQnAQ"
    }, 
    {
      "filename": "customTree.js",
      "title": "自定义复杂树图样式",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*kP_xSo6sQCAAAAAAAAAAAABkARQnAQ"
    }, 
    {
      "filename": "treeWithLargeData.js",
      "title": "大数据树图及复杂样式",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*iRgyS6tm4k4AAAAAAAAAAABkARQnAQ"
    }
  ]
 }
--- a/examples/tree/dendrogram/demo/basicDendrogram.js
+++ b/examples/tree/dendrogram/demo/basicDendrogram.js
@ -22,7 +22,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
        }, 'drag-canvas', 'zoom-canvas' ]
      },
      defaultNode: {
-        size: 16,
+        size: 26,
        anchorPoints: [[ 0, 0.5 ], [ 1, 0.5 ]],
        style: {
          fill: '#40a9ff',
@ -45,11 +45,6 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j

    graph.node(function(node) {
      return {
-        size: 26,
-        style: {
-          fill: '#40a9ff',
-          stroke: '#096dd9'
-        },
        label: node.id,
        labelCfg: {
          position: node.children && node.children.length > 0 ? 'left' : 'right',
--- a/examples/tree/dendrogram/demo/meta.json
+++ b/examples/tree/dendrogram/demo/meta.json
@ -7,12 +7,12 @@
    {
      "filename": "basicDendrogram.js",
      "title": "生态树",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*0WHqS5vdQVQAAAAAAAAAAABkARQnAQ"
    }, 
    {
      "filename": "tbDendrogram.js",
      "title": "至上而下的生态树",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*NdXQRr53i0kAAAAAAAAAAABkARQnAQ"
    }
  ]
 }
--- a/examples/tree/dendrogram/demo/tbDendrogram.js
+++ b/examples/tree/dendrogram/demo/tbDendrogram.js
@ -22,7 +22,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
        }, 'drag-canvas', 'zoom-canvas' ]
      },
      defaultNode: {
-        size: 16,
+        size: 26,
        anchorPoints: [[ 0, 0.5 ], [ 1, 0.5 ]],
        style: {
          fill: '#40a9ff',
@ -51,11 +51,6 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
        rotate = 90;
      }
      return {
-        size: 26,
-        style: {
-          fill: '#40a9ff',
-          stroke: '#096dd9'
-        },
        label: node.id,
        labelCfg: {
          position,
--- a/examples/tree/indented/demo/hIntended.js
+++ b/examples/tree/indented/demo/hIntended.js
@ -11,7 +11,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
      height,
      pixelRatio: 2,
      defaultNode: {
-        size: 16,
+        size: 26,
        anchorPoints: [[ 0, 0.5 ], [ 1, 0.5 ]],
        style: {
          fill: '#40a9ff',
@ -47,11 +47,6 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
        centerX = node.x;
      }
      return {
-        size: 26,
-        style: {
-          fill: '#40a9ff',
-          stroke: '#096dd9'
-        },
        label: node.id,
        labelCfg: {
          position: node.children && node.children.length > 0 ? 'left' : node.x > centerX ? 'right' : 'left',
--- a/examples/tree/indented/demo/meta.json
+++ b/examples/tree/indented/demo/meta.json
@ -7,12 +7,12 @@
    {
      "filename": "filesystem.js",
      "title": "缩近树-文件系统",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*PJnfTKFRaCAAAAAAAAAAAABkARQnAQ"
    }, 
    {
      "filename": "hIntended.js",
      "title": "缩近树-子节点两侧分布",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Mz8_TJ1NiV4AAAAAAAAAAABkARQnAQ"
    }
  ]
 }
--- a/examples/tree/mindmap/demo/hCustomSideMindmap.js
+++ b/examples/tree/mindmap/demo/hCustomSideMindmap.js
@ -21,7 +21,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
        }, 'drag-canvas', 'zoom-canvas' ]
      },
      defaultNode: {
-        size: 16,
+        size: 26,
        anchorPoints: [[ 0, 0.5 ], [ 1, 0.5 ]],
        style: {
          fill: '#40a9ff',
@ -65,11 +65,6 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
      }

      return {
-        size: 26,
-        style: {
-          fill: '#40a9ff',
-          stroke: '#096dd9'
-        },
        label: node.id,
        labelCfg: {
          position: node.children && node.children.length > 0 ? 'left' : node.x > centerX ? 'right' : 'left',
--- a/examples/tree/mindmap/demo/hLeftMindmap.js
+++ b/examples/tree/mindmap/demo/hLeftMindmap.js
@ -21,7 +21,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
        }, 'drag-canvas', 'zoom-canvas' ]
      },
      defaultNode: {
-        size: 16,
+        size: 26,
        anchorPoints: [[ 0, 0.5 ], [ 1, 0.5 ]],
        style: {
          fill: '#40a9ff',
@ -62,11 +62,6 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
      }

      return {
-        size: 26,
-        style: {
-          fill: '#40a9ff',
-          stroke: '#096dd9'
-        },
        label: node.id,
        labelCfg: {
          position: node.children && node.children.length > 0 ? 'right' : node.x > centerX ? 'right' : 'left',
--- a/examples/tree/mindmap/demo/hMindmap.js
+++ b/examples/tree/mindmap/demo/hMindmap.js
@ -21,7 +21,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
        }, 'drag-canvas', 'zoom-canvas' ]
      },
      defaultNode: {
-        size: 16,
+        size: 26,
        anchorPoints: [[ 0, 0.5 ], [ 1, 0.5 ]],
        style: {
          fill: '#40a9ff',
@ -59,11 +59,6 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
      }

      return {
-        size: 26,
-        style: {
-          fill: '#40a9ff',
-          stroke: '#096dd9'
-        },
        label: node.id,
        labelCfg: {
          position: node.children && node.children.length > 0 ? 'left' : node.x > centerX ? 'right' : 'left',
--- a/examples/tree/mindmap/demo/hRightMindmap.js
+++ b/examples/tree/mindmap/demo/hRightMindmap.js
@ -21,7 +21,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
        }, 'drag-canvas', 'zoom-canvas' ]
      },
      defaultNode: {
-        size: 16,
+        size: 26,
        anchorPoints: [[ 0, 0.5 ], [ 1, 0.5 ]],
        style: {
          fill: '#40a9ff',
@ -62,11 +62,6 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
      }

      return {
-        size: 26,
-        style: {
-          fill: '#40a9ff',
-          stroke: '#096dd9'
-        },
        label: node.id,
        labelCfg: {
          position: node.children && node.children.length > 0 ? 'right' : node.x > centerX ? 'right' : 'left',
--- a/examples/tree/mindmap/demo/meta.json
+++ b/examples/tree/mindmap/demo/meta.json
@ -7,22 +7,22 @@
    {
      "filename": "hMindmap.js",
      "title": "脑图树-子节点自动两侧分布",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*iUl2RKUlkQkAAAAAAAAAAABkARQnAQ"
    }, 
    {
      "filename": "hRightMindmap.js",
      "title": "脑图树-子节点右侧分布",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*tXJBRLKCehQAAAAAAAAAAABkARQnAQ"
    }, 
    {
      "filename": "hLeftMindmap.js",
      "title": "脑图树-子节点左侧分布",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Ktj7Tpy_f9gAAAAAAAAAAABkARQnAQ"
    }, 
    {
      "filename": "hCustomSideMindmap.js",
      "title": "脑图树-自定义子节点分布",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*kmScTLpALuwAAAAAAAAAAABkARQnAQ"
    }
  ]
 }
--- a/examples/tree/radialtree/demo/meta.json
+++ b/examples/tree/radialtree/demo/meta.json
@ -7,12 +7,12 @@
    {
      "filename": "radialDendrogram.js",
      "title": "生态辐射树",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*JVwJQ76SbZcAAAAAAAAAAABkARQnAQ"
    }, 
    {
      "filename": "radialCompactBox.js",
      "title": "紧凑辐射树",
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ERHiNBmudQ/82dee894-47e6-4250-8f48-84e519833f69.png"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*iEZJSpYV1jMAAAAAAAAAAABkARQnAQ"
    }
  ]
 }
--- a/examples/tree/radialtree/demo/radialCompactBox.js
+++ b/examples/tree/radialtree/demo/radialCompactBox.js
@ -22,7 +22,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
        }, 'drag-canvas', 'zoom-canvas' ]
      },
      defaultNode: {
-        size: 16,
+        size: 26,
        style: {
          fill: '#40a9ff',
          stroke: '#096dd9'
@ -40,10 +40,10 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
          return d.id;
        },
        getHeight: () => {
-          return 16;
+          return 26;
        },
        getWidth: () => {
-          return 16;
+          return 26;
        },
        getVGap: () => {
          return 20;
@ -57,11 +57,6 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j

    graph.node(function(node) {
      return {
-        size: 26,
-        style: {
-          fill: '#40a9ff',
-          stroke: '#096dd9'
-        },
        label: node.id
      };
    });
--- a/examples/tree/radialtree/demo/radialDendrogram.js
+++ b/examples/tree/radialtree/demo/radialDendrogram.js
@ -22,7 +22,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j
        }, 'drag-canvas', 'zoom-canvas' ]
      },
      defaultNode: {
-        size: 16,
+        size: 26,
        style: {
          fill: '#40a9ff',
          stroke: '#096dd9'
@ -44,11 +44,6 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.j

    graph.node(function(node) {
      return {
-        size: 26,
-        style: {
-          fill: '#40a9ff',
-          stroke: '#096dd9'
-        },
        label: node.id
      };
    });