系统增长

<!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>
<script>
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/system-growth.json', function(data) {
    var _d = d3,
      forceSimulation = _d.forceSimulation,
      forceLink = _d.forceLink,
      forceManyBody = _d.forceManyBody,
      forceX = _d.forceX,
      forceY = _d.forceY,
      forceCollide = _d.forceCollide;
    var _G = G6,
      Util = _G.Util;
    // 设置映射

var Mapper = G6.Plugins['tool.mapper'];
    var nodeColorMapper = new Mapper('node', 'index', 'color', ['#FD8C3D', '#D83F43', '#F7BED6', '#E487C7', '#46A848', '#D83F43', '#3B85BA', '#48335B', '#B7CDE9']);
    var nodeSizeMapper = new Mapper('node', 'pv', 'size', [4, 28], {
      scaleCfg: {
        type: 'log'
      }
    });
    var simulation = void 0;

var graph = new G6.Graph({
      container: 'mountNode',
      height: window.innerHeight,
      fitView: 'cc',
      plugins: [nodeColorMapper, nodeSizeMapper]
    });
    graph.read(data);

// 按 100，剩余所有，分割节点数据集
    var nodes_100 = [];
    var nodes_left = [];
    var width = graph.getWidth();
    var height = graph.getHeight();
    var nodes = graph.getNodes().map(function(node) {
      return node.getModel();
    });
    nodes.forEach(function(node) {
      if (nodes_100.length < 100 && Math.random() < 0.2) {
        nodes_100.push(node);
      } else {
        graph.hide(node.id);
        nodes_left.push(node);
      }
    });
    simulation = forceSimulation(nodes_100).force('collision', forceCollide().radius(function(model) {
      return model.size / 2 * 1.2;
    }).iterations(2)).velocityDecay(0.2).force("x", d3.forceX().strength(0.002)).force("y", d3.forceY().strength(0.002)).on('tick', function() {
      graph.updateNodePosition();
    });
    // 每隔一段时间添加一个节点
    setTimeout(function() {
      var concatNodes = nodes_100;
      var interval = setInterval(function() {
        if (nodes_left.length > 0) {
          var node = nodes_left[parseInt(Math.random() * nodes_left.length)];
          Util.Array.remove(nodes_left, node);
          node.x = 0;
          node.y = 0;
          concatNodes = concatNodes.concat(node);
          simulation.nodes(concatNodes).alpha(2).restart();
          graph.find(node.id).show();
        } else {
          clearInterval(interval);
        }
      }, 30);
    }, 3000);
  });
</script>
</body>
</html>

图表简介

展示 2018-06-06 ～ 2018-09-06 G6 活跃系统数的增长

树图

流图

网图

编辑器

图表简介