G6
G6 是一个由纯 JavaScript 编写的关系图基础技术框架。开发者能基于 G6 进行关系图的查看视图和编辑视图进行快速的二次开发。
安装
浏览器引入
<script src="https://gw.alipayobjects.com/os/antv/assets/g6/1.2.8/g6.min.js"></script>通过 npm 安装
外部用户暂时不提供npm安装，阿里集团内部同学，可通过 tnpm i @ali/g6 安装。
快速开始
G6 中所有的图都由边和节点构成，只要给出节点和边数据，G6 就能为您绘制出关系图。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关系图</title>
<!-- 第一步：引入G6 -->
<script src="https://gw.alipayobjects.com/os/antv/assets/g6/1.2.8/g6.min.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)