聚类的折叠/扩展交互

<!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/assets/lib/jquery-3.2.1.min.js"></script>
<style>
  .g6-tooltip {
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    font-size: 12px;
    color: #545454;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px 8px;
    box-shadow: rgb(174, 174, 174) 0px 0px 10px;
  }
</style>
<script>
  /**
   * 该示例演示 Fruchterman 布局算法的聚类效果，以及点击交互进行聚类的聚合和扩散效果
   * by 十吾
   */
  var descriptionDiv = document.createElement("div");
  descriptionDiv.innerHTML = '读取数据 & 布局中，请稍候......';
  var graphDiv = document.getElementById("mountNode");
  document.body.insertBefore(descriptionDiv, graphDiv);

var nodeMap = new Map();
    var clusterMap = new Map();
    var cidx = 0;
    nodes.forEach(function(n) {
      nodeMap.set(n.id, n);
      var region = n.region.split(" ");
      if (n.region === 'East Asia') region = n.region;
      else region = region[region.length - 1];

if (clusterMap.get(region) === undefined) {
        clusterMap.set(region, cidx);
        cidx++;
      }
      var clusterId = clusterMap.get(region);
      var color = colors[clusterId % colors.length];
      n.style = {
        color: color,
        fill: color,
        stroke: '#666',
        lineWidth: 0.6
      };
      n.cluster = clusterId;
      n.importValue = 0;
      n.exportValue = 0;
    });
    // map the value of 
    edges.forEach(function(e) {
      if (e.value === '') e.value = 0;
      var v = parseFloat(e.value);
      nodeMap.get(e.source).exportValue += v;
      nodeMap.get(e.target).importValue += v;
    });
    mapValueToProp(nodes, 'exportValue', 'size', [2, 12]);
    var graph = new G6.Graph({
      container: 'mountNode',
      width: window.innerWidth,
      height: window.innerHeight,
      layout: {
        type: 'fruchterman',
        maxIteration: 8000,
        gravity: 10,
        clustering: true,
        clusterGravity: 30
      },
      fitView: true,
      linkCenter: true,
      defaultNode: {
        shape: 'circle',
        size: 5
      },
      defaultEdge: {
        shape: 'quadratic'
      },
      modes: {
        default: ['drag-node', 'drag-canvas', {
          type: 'tooltip',
          formatText: function formatText(model) {
            var name = '';
            var countries = '';
            if (model.name) name = model.name + '<br/>';
            if (model.countries) countries = '<br/>Number of Countries: ' + model.countries;
            var text = name + 'Export Value: ' + model.exportValue + "(1000USD)" + '<br/>Region: ' + model.region + '<br/>Cluster: ' + model.cluster + countries;
            return text;
          },

shouldUpdate: function shouldUpdate(e) {
            return true;
          }
      }]
      }
    });

graph.on('afterlayout', function() {
      descriptionDiv.innerHTML = '布局完成！';
    });

graph.data(data);
    graph.render();

graph.on('node:click', function(e) {
      var targetItem = e.item;
      var model = targetItem.getModel();
      var graphEdges = graph.getEdges();
      var graphNodes = graph.getNodes();
      // click on the cluster node
      if (model.id.substr(0, 7) === 'cluster') {
        graphNodes.forEach(function(gn) {
          var gnModel = gn.getModel();
          // show the common nodes
          if (gnModel.cluster === model.cluster && gnModel.id.substr(0, 7) != 'cluster') {
            gn.show();
          }
          // remove the cluster nodes
          if (gnModel.id === model.id) graph.removeItem(gn);
        });

graphEdges.forEach(function(ge) {
          var sourceModel = ge.get('sourceNode').getModel();
          var targetModel = ge.get('targetNode').getModel();
          // show the common edges
          if (sourceModel.cluster === model.cluster && sourceModel.id.substr(0, 7) !== 'cluster' || targetModel.cluster === model.cluster && targetModel.id.substr(0, 7) !== 'cluster') {
            ge.show();
            // add the edges to other cluster nodes
            if (!ge.get('sourceNode').get('visible') && sourceModel.cluster !== model.cluster) {
              var c1 = beginColor,
                c2 = endColor;
              if (model.x > targetModel.x) {
                c1 = endColor;
                c2 = beginColor;
              }
              graph.addItem('edge', {
                source: 'cluster' + sourceModel.cluster,
                target: targetModel.id,
                id: 'cluster-edge-' + ge.id,
                style: {
                  stroke: 'l(0) 0:' + c1 + ' 1:' + c2,
                  lineWidth: 0.4,
                  strokeOpacity: 0.2
                }
              });
            } else if (ge.get('targetNode').get('visible') && targetModel.cluster !== model.cluster) {
              var _c = beginColor,
                _c2 = endColor;
              if (sourceModel.x > model.x) {
                _c = endColor;
                _c2 = beginColor;
              }
              graph.addItem('edge', {
                source: sourceModel.id,
                target: 'cluster' + targetModel.id,
                id: 'cluster-edge-' + ge.id,
                style: {
                  stroke: 'l(0) 0:' + _c + ' 1:' + _c2,
                  lineWidth: 0.4,
                  strokeOpacity: 0.2
                }
              });
            }
            // hide the edges to the common nodes in other clusters
            if (!ge.get('sourceNode').get('visible') || !ge.get('targetNode').get('visible')) {
              ge.hide();
            }
          }
          // remove the cluster edges
          if (sourceModel.id === model.id || targetModel.id === model.id) {
            graph.removeItem(ge);
          }
        });
      } else {
        // click on the common node, cllapse them
        // calculate the cluster center
        var center = {
          x: 0,
          y: 0,
          count: 0,
          exportValue: 0
        };
        nodes.forEach(function(n) {
          if (n.cluster === model.cluster) {
            center.x += n.x;
            center.y += n.y;
            center.count++;
            center.exportValue += n.exportValue;
          }
        });
        center.x /= center.count;
        center.y /= center.count;
        // add cluster node on the center
        var size = center.count * 1;
        var clusterNodeId = 'cluster' + model.cluster;
        var color = colors[model.cluster % colors.length];
        var regionStrs = model.region.split(' ');
        var region = regionStrs[regionStrs.length - 1];
        if (model.region === 'East Asia') region = model.region;
        var labelPosition = 'center';
        if (region.length > size) labelPosition = 'left';
        var clusterNode = graph.addItem('node', {
          x: center.x,
          y: center.y,
          id: clusterNodeId,
          cluster: model.cluster,
          region: region,
          countries: center.count,
          exportValue: center.exportValue,
          style: {
            color: color,
            fill: color,
            stroke: '#666',
            lineWidth: 0.6
          },
          size: size,
          label: region,
          labelCfg: {
            style: {
              fontSize: 8.5
            },
            position: labelPosition
          }
        });

// add edges about the cluster
        graphEdges.forEach(function(ge) {
          var sourceModel = ge.get('sourceNode').getModel();
          var targetModel = ge.get('targetNode').getModel();
          if (!ge.get('sourceNode').get('visible') || !ge.get('targetNode').get('visible')) return;
          if (sourceModel.cluster === model.cluster && targetModel.cluster !== model.cluster) {
            var c1 = beginColor,
              c2 = endColor;
            if (center.x > targetModel.x) {
              c1 = endColor;
              c2 = beginColor;
            }
            graph.addItem('edge', {
              source: clusterNodeId,
              target: targetModel.id,
              id: 'cluster-edge-' + ge.id,
              style: {
                stroke: 'l(0) 0:' + c1 + ' 1:' + c2,
                lineWidth: 0.4,
                strokeOpacity: 0.2
              }
            });
          } else if (targetModel.cluster === model.cluster && sourceModel.cluster !== model.cluster) {
            var _c3 = beginColor,
              _c4 = endColor;
            if (sourceModel.x > center.x) {
              _c3 = endColor;
              _c4 = beginColor;
            }
            graph.addItem('edge', {
              source: sourceModel.id,
              target: clusterNodeId,
              id: 'cluster-edge-' + ge.id,
              style: {
                stroke: 'l(0) 0:' + _c3 + ' 1:' + _c4,
                lineWidth: 0.4,
                strokeOpacity: 0.2
              }
            });
          }
        });

// hide the common nodes in the cluster
        graphNodes.forEach(function(gn) {
          if (gn.getModel().cluster === model.cluster && gn.getModel().id.substr(0, 7) !== 'cluster') gn.hide();
        });
        // hide the common edges about cluster
        graphEdges.forEach(function(ge) {
          if (!ge.get('sourceNode').get('visible') || !ge.get('targetNode').get('visible')) ge.hide();
        });
      }
    });
  });

树图

一般图

其他表达形式

元素

交互

动画

辅助工具

复杂案例

聚类的折叠/扩展交互