G6 - 页面流量分析（二）

             <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>页面流量分析（二）</title>
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/g6/1.2.8/g6.min.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script type="text/javascript">
var Util = G6.Util;

/**
 * 添加水波
 * @param {number} x           中心x
 * @param {number} y           中心y
 * @param {number} level       水位等级 0～1
 * @param {number} waveCount   水波数
 * @param {number} colors      色值
 * @param {number} group       图组
 * @param {number} clip        用于剪切的图形
 */
function addWaterWave(x, y, level, waveCount, colors, group, clip){
  var wave;
  var bbox = clip.getBBox();
  var width = bbox.maxX - bbox.minX;
  var height = bbox.maxY - bbox.minY;
  var duration = 2800;
  var delayDiff = 300;
  var minorWaveDiff = 10;

  for (var i = 0; i < waveCount; i++) {
    wave = group.addShape('path', {
      attrs: {
        path: Util.getWaterPath(
          width/2,
          (y+height/2) - height * level + i*minorWaveDiff,
          50, 0, 2, x, y
        ),
        fill: colors[i],
        clip: clip
      }
    });
    wave.animate({
      transform: [
        ['t', width/2, 0]
      ],
      repeat: true
    }, duration - i * delayDiff);
  }
}

// 第一步：获取数据
var data = {
  "nodes": [
    {
      "label": "首页",
      "val": 90,
      "runoff": 30,
      "id": "add1174b"
    },
    {
      "label": "页面1",
      "val": 70,
      "runoff": 30,
      "id": "fbc69eaa"
    },
    {
      "label": "页面2",
      "val": 10,
      "runoff": 90,
      "id": "6d0df4b8"
    },
    {
      "label": "页面3",
      "val": 40,
      "runoff": 60,
      "id": "fcaedf74"
    },
    {
      "label": "页面4",
      "val": 30,
      "runoff": 99,
      "id": "0ce831a6"
    },
    {
      "label": "页面5",
      "val": 15,
      "runoff": 85,
      "id": "46c87dc5"
    },
    {
      "label": "页面6",
      "val": 60,
      "runoff": 99,
      "id": "a7ae06e1"
    },
    {
      "label": "页面7",
      "val": 10,
      "runoff": 99,
      "id": "97d725aa"
    },
    {
      "label": "页面8",
      "val": 1,
      "runoff": 99,
      "id": "1009d1ce"
    }
  ],
  "edges": [
    {
      "source": "add1174b",
      "target": "fbc69eaa",
      "val": 80,
      "id": "ae85ce02"
    },
    {
      "source": "add1174b",
      "target": "6d0df4b8",
      "val": 40,
      "id": "4f2a272a"
    },
    {
      "source": "add1174b",
      "target": "fcaedf74",
      "val": 47,
      "id": "e1d27d5d"
    },
    {
      "source": "fbc69eaa",
      "target": "0ce831a6",
      "val": 70,
      "id": "ebb1bb90"
    },
    {
      "source": "fbc69eaa",
      "target": "46c87dc5",
      "val": 60,
      "id": "de5483e7"
    },
    {
      "source": "fcaedf74",
      "target": "a7ae06e1",
      "val": 50,
      "id": "38631f93"
    },
    {
      "source": "6d0df4b8",
      "target": "97d725aa",
      "val": 40,
      "id": "ca7e320d"
    },
    {
      "source": "46c87dc5",
      "target": "1009d1ce",
      "val": 30,
      "id": "7dc8fe14"
    },
    {
      "source": "fbc69eaa",
      "target": "a7ae06e1",
      "val": 20,
      "id": "a0318c7b"
    }
  ]
};

// 第二步：注册图形
G6.registNode('waterTank', {
  draw: function(cfg, group){
    var width = 100;
    var height = 60;
    var labelMarginTop = 10;
    var shape = group.addShape('rect', {
      attrs: {
        x: cfg.x-width/2,
        y: cfg.y-height/2,
        width: width,
        stroke: '#ccc',
        lineDash: [5,5],
        height: height
      }
    });
    addWaterWave(cfg.x, cfg.y, cfg.size, 3, ['#073069', '#0076C9', '#7EC2F3'], group, shape);
    group.addShape('text', {
      attrs: {
        x: cfg.x,
        y: cfg.y + height/2 + labelMarginTop,
        text: cfg.label,
        textAlign: 'center',
        textBaseline: 'top',
        fill: '#666'
      }
    });
    return shape;
  },
  // 设置锚点
  getAnchorPoints: function(){
    return [
      [1, 0.5], // 右边边的中点
      [0, 0.5] // 左边边的中点
    ];
  }
});

// 第三步：进行布局
var Layout = G6.Layout;
var margin = 60;
var height = 800 - 2 * margin;
var width = 500 - 2 * margin;
var nodes = data.nodes;
var edges = data.edges;
var layout = new Layout.Flow({
  nodes: nodes,
  edges: edges
});
nodes = layout.getNodes();
nodes.map(function(node) {
  var x = node.x * width + margin;
  var y = node.y * height + margin;
  node.x = y;
  node.y = x;
});

// 第四步：初始化图
var net = new G6.Net({
  id: "c1",            // 此处替换容器id
  height: 450,         // 此处替换高度
  fitView: 'autoZoom', // 自动缩放
});

// 第五步：数据映射
net.tooltip(true);
net.node()
     .size(function(obj){
       var domain = 100;
       return obj.val/domain;
     })
     .shape('waterTank')
     .tooltip('id*label*val');
net.edge()
  .size('val', function(val){
    return val/100 * 6;
  })
  .shape('smooth')
  .style({
    stroke: "#008DE8",
    strokeOpacity: 0.4,
    arrow: true
  });

// 第六步：载入数据
net.source(nodes, edges);

// 第七步：渲染关系图
net.render();
</script>

      </body>
    </html>
          
        
页面流量分析（二）
该图展示了页面之间的流量流转。该示例主要向大家展示利用 G6.Canvas 的动画接口对节点进行样式上的修饰。