minimap

https://antv-2018.alipay.com/zh-cn/g6/3.x/demo/tool/minimap.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Minimap 缩略图</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/minimap.js"></script>
<style>
    .g6-minimap {
        position: absolute;
        right: 0;
        top: 6px;
        background-color: #fff;
    }
</style>
<script>
  var minimap = new Minimap({
    size: [window.innerWidth / 4, window.innerHeight / 4]
  });
  var graph = new G6.Graph({
    container: 'mountNode',
    width: window.innerWidth,
    height: window.innerHeight,
    plugins: [minimap],
    defaultNode: {
      size: [40, 40]
    },
    modes: {
      default: ['zoom-canvas', 'drag-canvas']
    }
  });
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/g6-construction.json', function(data) {
    data.nodes.forEach(function(node) {
      node.id += '';
    });
    data.edges.forEach(function(edge) {
      edge.source += '';
      edge.target += '';
    });
    graph.read(data);
  });
</script>
</body>
</html>
文档更新时间: 2024-04-05 16:11 作者：admin