feat(demo): add one demo with very large nodes

2024-12-05 05:09:07 +08:00 · 2019-04-28 15:53:52 +08:00 · 2019-04-28 15:53:52 +08:00 · d803706726
commit d803706726
parent 90a03d1d44
1 changed files with 137 additions and 0 deletions
--- a/demos/nodes-large.html
+++ b/demos/nodes-large.html
@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<style>
+</style>
+<body>
+<select id="layout">
+  <option value="dendrogram">系统树</option>
+  <option value="compactBox">紧凑树</option>
+  <option value="mindmap">脑图布局</option>
+</select>
+<div id="mountNode"></div>
+<script src="assets/hierarchy.js"></script>
+<script src="../build/g6.js"></script>
+<script>
+  let currentLayout = 'dendrogram';
+  const layouts = {
+    dendrogram: function(data) {
+      return Hierarchy.dendrogram(data, {
+        direction: 'LR', // H / V / LR / RL / TB / BT
+        nodeSep: 50,
+        rankSep: 100
+      })},
+    compactBox: function(data) {
+      return Hierarchy.compactBox(data, {
+        direction: 'LR',
+        getId(d) { return d.id; },
+        getHeight() { return 16 },
+        getWidth() { return 16 },
+        getVGap() { return 50 },
+        getHGap() { return 50 }
+      });
+    },
+    mindmap: function(data) {
+      return Hierarchy.mindmap(data, {
+        direction: 'H',
+        getHeight() { return 16; },
+        getWidth() { return 16; },
+        getVGap() { return 50; },
+        getHGap() { return 50; }
+      });
+    }
+  };
+  const graph = new G6.TreeGraph({
+    container: 'mountNode',
+    width: 1000,
+    height: 800,
+    pixelRatio: 2,
+    //renderer: 'svg',
+    animate: false,
+    modes: {
+      default: ['collapse-expand', 'drag-canvas']
+    },
+    defaultNode: {
+      size: 16,
+      anchorPoints: [[0,0.5], [1,0.5]]
+    },
+    defaultEdge: {
+      shape: 'cubic-horizontal'
+    },
+    nodeStyle: {
+      default: {
+        fill: '#40a9ff',
+        stroke: '#096dd9'
+      }
+    },
+    edgeStyle: {
+      default: {
+        stroke: '#A3B1BF'
+      }
+    },
+    layout: layouts.dendrogram
+  });
+  let nodeCount = 0;
+  function generateChildren(node, count, level) {
+    //const count = parseInt(Math.random() * maxCount);
+    const rst = [];
+    for (var i = 0; i < count; i++) {
+      nodeCount++;
+      rst.push({
+        id: node.id + i,
+        label: node.id + '-' + i
+      });
+    }
+    if (level <= 3) {
+      rst.forEach(subNode => {
+        generateChildren(subNode, count, level + 1)
+      });
+    }
+    node.children = rst;
+  }
+  const data = {
+    isRoot: true,
+    id: '0',
+    style: {
+      fill: 'red'
+    }
+  };
+  generateChildren(data, 6, 0);
+
+  graph.data(data);
+  graph.render();
+  graph.on('beforepaint', () => {
+    let hideCount = 0;
+    const nodes = graph.getNodes();
+    nodes.forEach(node => {
+      const model = node.get('model');
+      const point = graph.getCanvasByPoint(model.x, model.y);
+      const nodeGroup = node.get('group');
+      if (point.x < 0 || point.y < 0 || point.x > 1000 || point.y > 800) {
+        hideCount++;
+        node.hide();
+      } else {
+        node.show();
+      }
+    });
+
+    const edges = graph.getEdges();
+    edges.forEach(edge => {
+      const sourceNode = edge.get('sourceNode');
+      const targetNode = edge.get('targetNode');
+      if (!sourceNode.get('visible') && !targetNode.get('visible')) {
+        edge.hide();
+      } else {
+        edge.show();
+      }
+    }) 
+    //console.log(hideCount);
+  });
+  graph.fitView();
+  console.log(nodeCount);
+</script>
+</body>
+</html>