G2 - The Grammar Of Graphics

关系图 / 树的展开折叠

选择主题

源码

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>树的展开折叠</title>
      <link rel="stylesheet" href="https://os.alipayobjects.com/s/prod/g2/static/doc-b57e62881a0344ecde9e68c4ce312143.css"/>
      
      <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>

<script src="https://a.alipayobjects.com/g/datavis/g2/2.2.1/g2.js"></script>
    </head>
    <body>
      <div id="c1"></div>
      
      <script>
var data = [{
  "name": "flare",
  "children": [{
    "name": "analytics",
    "children": [{
      "name": "cluster",
      "children": [{
        "name": "AgglomerativeCluster",
        "size": 3938
      }, {
        "name": "CommunityStructure",
        "size": 3812
      }, {
        "name": "HierarchicalCluster",
        "size": 6714
      }, {
        "name": "MergeEdge",
        "size": 743
      }]
    }, {
      "name": "graph",
      "children": [{
        "name": "BetweennessCentrality",
        "size": 3534
      }, {
        "name": "LinkDistance",
        "size": 5731
      }, {
        "name": "MaxFlowMinCut",
        "size": 7840
      }, {
        "name": "ShortestPaths",
        "size": 5914
      }, {
        "name": "SpanningTree",
        "size": 3416
      }]
    }, {
      "name": "optimization",
      "children": [{
        "name": "AspectRatioBanker",
        "size": 7074
      }]
    }]
  },{
    "name": "animate",
    "children": [{
      "name": "Easing",
      "size": 17010
    }, {
      "name": "FunctionSequence",
      "size": 5842
    }, {
      "name": "interpolate",
      "children": [{
        "name": "ArrayInterpolator",
        "size": 1983
      }, {
        "name": "ColorInterpolator",
        "size": 2047
      }, {
        "name": "DateInterpolator",
        "size": 1375
      }, {
        "name": "Interpolator",
        "size": 8746
      }, {
        "name": "MatrixInterpolator",
        "size": 2202
      }, {
        "name": "NumberInterpolator",
        "size": 1382
      }, {
        "name": "ObjectInterpolator",
        "size": 1629
      }, {
        "name": "PointInterpolator",
        "size": 1675
      }, {
        "name": "RectangleInterpolator",
        "size": 2042
      }]
    }, {
      "name": "ISchedulable",
      "size": 1041
    }, {
      "name": "Parallel",
      "size": 5176
    }, {
      "name": "Pause",
      "size": 449
    }, {
      "name": "Scheduler",
      "size": 5593
    }, {
      "name": "Sequence",
      "size": 5534
    }, {
      "name": "Transition",
      "size": 9201
    }, {
      "name": "Transitioner",
      "size": 19975
    }, {
      "name": "TransitionEvent",
      "size": 1116
    }, {
      "name": "Tween",
      "size": 6006
    }]
  }]
}];

function drawNode(cfg, group, collapsed, isLeaf) {
  var x = cfg.x;
  var y = cfg.y;
  var pointSize = 5;

return shape;
}

G2.Shape.registShape('point', 'collapsed', {
  drawShape: function(cfg, group) {
    return drawNode(cfg, group, true)
  }
});

G2.Shape.registShape('point', 'expanded', {
  drawShape: function(cfg, group) {
    return drawNode(cfg, group, false);
  }
});

G2.Shape.registShape('point', 'leaf', {
  drawShape: function(cfg, group) {
    return drawNode(cfg, group, false, true);
  }
});

var Layout = G2.Layout;
// 使用layout，用户可以自己编写自己的layout
// 仅约定输出的节点 存在 id,x，y字段即可
var layout = new Layout.Tree({
  nodes: data
});
var dx = layout.dx;
var nodes = layout.getNodes();
var edges = layout.getEdges();

function renderTree(nodes, edges, dx) {
  chart.clear();
  var height = Math.max(500, 26 / dx); // 最小高度 500
  chart.changeSize(1000, height);
  // 首先绘制 edges，点要在边的上面
  // 创建单独的视图
  var edgeView = chart.createView();
  edgeView.source(edges);
  edgeView.coord().transpose().scale(1, -1); //
  edgeView.axis(false);
  edgeView.tooltip(false);
  // Stat.link 方法会生成 ..x, ..y的字段类型，数值范围是 0-1
  edgeView.edge()
    .position(Stat.link('source*target',nodes))
    .shape('smooth')
    .color('#ccc');

// 创建节点视图
  var nodeView = chart.createView();
  nodeView.coord().transpose().scale(1, -1); //'polar'
  nodeView.axis(false);
  // 节点的x,y范围是 0，1
  // 因为边的范围也是 0,1所以正好统一起来
  nodeView.source(nodes, {
    x: {min: 0,max:1},
    y: {min: 0, max:1},
    value: {min: 0}
  },['id','x','y','name','children','collapsed']); // 由于数据中没有 'collapsed' 字段，所以需要设置所有的字段名称
  nodeView.point().position('x*y').color('steelblue').size('name', function(name) {
    var length = strLen(name);
    return length * 6 + 5 * 2;
  }).label('name', {
    offset: 6,
    labelEmit: true
  })
  .shape('children*collapsed', function(children,collapsed) {
    if (children) {
      if (collapsed) {
        return 'collapsed';
      } else {
        return 'expanded';
      }
    }
    return 'leaf';
  })
  .tooltip('name*id');

chart.render();
}

chart.on('plotclick', function(ev){
  var shape = ev.shape;
  if (shape) {
    var obj = shape.get('origin');
    var id = obj._origin.id;
    var node = layout.findNode(id);
    if (node && node.children) {
      node.collapsed = !node.collapsed ? 1 : 0;
      layout.reset();
      nodes = layout.getNodes();
      edges = layout.getEdges();
      dx = layout.dx;
      // edgeView.changeData(edges);
      renderTree(nodes, edges, dx);
    }
  }
})
</script>
      
    </body>
  </html>

<script src="https://a.alipayobjects.com/g/datavis/g2/2.2.1/g2.js"></script>
      <script>
        G2.Global.setTheme('dark');
      </script>
    </head>
    <body>
      <div id="c1"></div>
      <script>
var data = [{
  "name": "flare",
  "children": [{
    "name": "analytics",
    "children": [{
      "name": "cluster",
      "children": [{
        "name": "AgglomerativeCluster",
        "size": 3938
      }, {
        "name": "CommunityStructure",
        "size": 3812
      }, {
        "name": "HierarchicalCluster",
        "size": 6714
      }, {
        "name": "MergeEdge",
        "size": 743
      }]
    }, {
      "name": "graph",
      "children": [{
        "name": "BetweennessCentrality",
        "size": 3534
      }, {
        "name": "LinkDistance",
        "size": 5731
      }, {
        "name": "MaxFlowMinCut",
        "size": 7840
      }, {
        "name": "ShortestPaths",
        "size": 5914
      }, {
        "name": "SpanningTree",
        "size": 3416
      }]
    }, {
      "name": "optimization",
      "children": [{
        "name": "AspectRatioBanker",
        "size": 7074
      }]
    }]
  },{
    "name": "animate",
    "children": [{
      "name": "Easing",
      "size": 17010
    }, {
      "name": "FunctionSequence",
      "size": 5842
    }, {
      "name": "interpolate",
      "children": [{
        "name": "ArrayInterpolator",
        "size": 1983
      }, {
        "name": "ColorInterpolator",
        "size": 2047
      }, {
        "name": "DateInterpolator",
        "size": 1375
      }, {
        "name": "Interpolator",
        "size": 8746
      }, {
        "name": "MatrixInterpolator",
        "size": 2202
      }, {
        "name": "NumberInterpolator",
        "size": 1382
      }, {
        "name": "ObjectInterpolator",
        "size": 1629
      }, {
        "name": "PointInterpolator",
        "size": 1675
      }, {
        "name": "RectangleInterpolator",
        "size": 2042
      }]
    }, {
      "name": "ISchedulable",
      "size": 1041
    }, {
      "name": "Parallel",
      "size": 5176
    }, {
      "name": "Pause",
      "size": 449
    }, {
      "name": "Scheduler",
      "size": 5593
    }, {
      "name": "Sequence",
      "size": 5534
    }, {
      "name": "Transition",
      "size": 9201
    }, {
      "name": "Transitioner",
      "size": 19975
    }, {
      "name": "TransitionEvent",
      "size": 1116
    }, {
      "name": "Tween",
      "size": 6006
    }]
  }]
}];

function drawNode(cfg, group, collapsed, isLeaf) {
  var x = cfg.x;
  var y = cfg.y;
  var pointSize = 5;

return shape;
}

G2.Shape.registShape('point', 'collapsed', {
  drawShape: function(cfg, group) {
    return drawNode(cfg, group, true)
  }
});

G2.Shape.registShape('point', 'expanded', {
  drawShape: function(cfg, group) {
    return drawNode(cfg, group, false);
  }
});

G2.Shape.registShape('point', 'leaf', {
  drawShape: function(cfg, group) {
    return drawNode(cfg, group, false, true);
  }
});

chart.render();
}

function drawNode(cfg, group, collapsed, isLeaf) {
  var x = cfg.x;
  var y = cfg.y;
  var pointSize = 5;

return shape;
}

G2.Shape.registShape('point', 'collapsed', {
  drawShape: function(cfg, group) {
    return drawNode(cfg, group, true)
  }
});

G2.Shape.registShape('point', 'expanded', {
  drawShape: function(cfg, group) {
    return drawNode(cfg, group, false);
  }
});

G2.Shape.registShape('point', 'leaf', {
  drawShape: function(cfg, group) {
    return drawNode(cfg, group, false, true);
  }
});

chart.render();
}

树的展开折叠

支持树的展开折叠，支持自定义树节点