AntV - G6 关系数据可视化框架 项目简介
G6 是一个由纯 JavaScript 编写的关系图基础技术框架,是解决流程图和关系分析的图表库,集成了大量的交互,可以轻松的进行动态流程图和关系网络的开发。特性易用的图形、交互拓展订制完备的 数据 -> 图形 映射语法精致的、简单的、易用的、丰富的关系图内含高效、丰富的布局算法内含基础的关系图编辑行为支持环境现代浏览器和 IE9 及以上。安装浏览器引入<script src="https://gw.alipayobjects.com/as/g/datavis/g6/1.2.0/g6.min.js"></script>通过 npm 安装官方提供了 G6 npm 包,通过下面的命令即可完成安装npm install @antv/g6 --save成功安装完成之后,即可使用 import 或 require 进行引用。import G6 from '@antv/g6';
const net = new G6.Net({
id: 'c1',
width: 600,
height: 300
});示例代码G6 中所有的图都由边和节点构成,只要给出节点和边数据,G6 就能为您绘制出关系图。// 第三步:设置数据
const data = {
"nodes": [
{
"x": 140,
"y": 210,
"id": "node1"
},
{
"x": 270,
"y": 210,
"id": "node2"
}
],
"edges": [
{
"source": "node1",
"id": "edge1",
"target": "node2"
}
]
};
// 第四步:配置G6画布
const net = new G6.Net({
id: 'c1', // 容器ID
width: 500, // 画布宽
height: 500 // 画布高
});
// 第五步:载入数据
net.source(data.nodes, data.edges);
// 第六步:渲染关系图
net.render();
const net = new G6.Net({
id: 'c1',
width: 600,
height: 300
});示例代码G6 中所有的图都由边和节点构成,只要给出节点和边数据,G6 就能为您绘制出关系图。// 第三步:设置数据
const data = {
"nodes": [
{
"x": 140,
"y": 210,
"id": "node1"
},
{
"x": 270,
"y": 210,
"id": "node2"
}
],
"edges": [
{
"source": "node1",
"id": "edge1",
"target": "node2"
}
]
};
// 第四步:配置G6画布
const net = new G6.Net({
id: 'c1', // 容器ID
width: 500, // 画布宽
height: 500 // 画布高
});
// 第五步:载入数据
net.source(data.nodes, data.edges);
// 第六步:渲染关系图
net.render();