浙江省各城市大学分布

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浙江省各城市大学分布</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/pkg/_antv.g6-2.2.0/build/g6.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-2.2.6/build/plugins.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/assets/lib/d3-4.13.0.min.js"></script>
<style>
  .label {
    fill: white;
  }
</style>
<script>
  $("#mountNode").css('backgroundColor', '#0F141F');
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/university.json', function(data) {
    var Mapper = G6.Plugins['tool.d3.mapper'];
    var Util = G6.Util;
    var _d = d3,
      forceSimulation = _d.forceSimulation,
      forceLink = _d.forceLink,
      forceManyBody = _d.forceManyBody,
      forceX = _d.forceX,
      forceY = _d.forceY;

var nodeColorMapper = new Mapper('node', '办学层次', 'color', ['#4BA4C4', '#F0D79F', '#FF8B33']);
    var simulation = void 0;

// 注册城市文本导引信息
    G6.registerGuide('city-label', {
      draw: function draw(item) {
        var tree = item.getGraph();
        var roots = tree.getRoots();
        var group = item.getGraphicGroup();
        roots.forEach(function(root) {
          var bbox = Util.getTotalBBox(root.getAllChildren().map(function(child) {
            return child.getBBox();
          }));
          var model = root.getModel();
          group.addShape('text', {
            attrs: {
              x: bbox.minX,
              y: bbox.minY - 8,
              text: model.name,
              fill: '#ccc'
            }
          });
        });
      }
    });

// 拖拽画布交互
    var lastPoint = void 0;
    tree.on('canvas:mouseenter', function() {
      tree.css({
        cursor: '-webkit-grabbing'
      });
    });
    tree.on('dragstart', function() {
      tree.css({
        cursor: '-webkit-grabbing'
      });
    });
    tree.on('drag', function(ev) {
      if (lastPoint) {
        tree.translate(ev.domX - lastPoint.x, ev.domY - lastPoint.y);
      }
      lastPoint = {
        x: ev.domX,
        y: ev.domY
      };
    });
    tree.on('dragend', function() {
      lastPoint = undefined;
      tree.css({
        cursor: '-webkit-grab'
      });
    });
    tree.on('canvas:mouseleave', function() {
      lastPoint = undefined;
    });
  });
</script>
</body>
</html>

图表简介

展示了浙江省，各个城市，本科和专科的数量及分布情况

树图

流图

网图

编辑器

浙江省各城市大学分布

图表简介