https://antv-2018.alipay.com/zh-cn/g6/3.x/demo/tool/grid.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Grid 网格</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/grid.js"></script>
<script>
  var data = {
    nodes: [{
      id: '0',
      label: 'node-0',
      x: 100,
      y: 100
  }, {
      id: '1',
      label: 'node-1',
      x: 250,
      y: 100
  }, {
      id: '2',
      label: 'node-2',
      x: 150,
      y: 350
  }, {
      id: '3',
      label: 'node-3',
      x: 420,
      y: 380
  }],
    edges: [{
      id: 'e1',
      source: '0',
      target: '1'
  }, {
      id: 'e2',
      source: '0',
      target: '3'
  }, {
      id: 'e3',
      source: '3',
      target: '2'
  }]
  };
  var grid = new Grid();
  var graph = new G6.Graph({
    container: 'mountNode',
    width: window.innerWidth,
    height: window.innerHeight,
    plugins: [grid],
    defaultNode: {
      size: [80, 40],
      shape: 'rect'
    },
    modes: {
      default: ['zoom-canvas', 'drag-canvas', 'drag-node']
    }
  });
  graph.read(data);
  graph.render();
</script>
</body>
</html>
文档更新时间: 2024-04-05 16:11   作者：admin