G6

G6 是一个由纯 JavaScript 编写的关系图基础技术框架。开发者能基于 G6 进行关系图的查看视图编辑视图进行快速的二次开发。

安装

浏览器引入

<script src="https://a.alipayobjects.com/g/datavis/g6/1.0.6/index.js"></script>

通过 npm 安装

外部用户暂时不提供npm安装,阿里集团内部同学,可通过 tnpm i @ali/g6 安装。

快速开始

G6 中所有的图都由边和节点构成,只要给出节点数据,G6 就能为您绘制出关系图。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>关系图</title>
    <!-- 第一步:引入G6 -->
    <script src="https://a.alipayobjects.com/g/datavis/g6/1.0.6/index.js"></script>
  </head>
  <body>
    <!-- 第二步:创建DOM容器 -->
    <div id="c1"></div>
    <script>
      // 第三步:设置数据
      var data = {
        "nodes": [
          {
            "x": 140,
            "y": 210,
            "id": "node1"
          },
          {
            "x": 270,
            "y": 210,
            "id": "node2"
          }
        ],
        "edges": [
          {
            "source": "node1",
            "id": "edge1",
            "target": "node2"
          }
        ]
      };
      // 第四步:配置G6画布
      var net = new G6.Net({
          id: 'c1',      // 容器ID
          width: 500,    // 画布宽
          height: 500    // 画布高
        });
      // 第五步:载入数据
      net.source(data.nodes, data.edges);
      // 第六步:渲染关系图
      net.render();
    </script>
  </body>
</html>

体验改进计划说明

为了更好服务用户,G6 会将 URL 等信息发送回 AntV 服务器:

https://kcart.alipay.com/web/bi.do

除了 URL 与 G6 版本信息外,不会收集任何其他信息,一切为了能对 G6 的运行情况有更多了解,以更好服务于用户。如有担心,可以通过下面的代码关闭:

// 关闭 G6 的体验改进计划打点请求
G6.track(false)