安装&引用

 npm install --save @antv/g6


68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f726d73706f7274616c2f485178596775696e464f4d49587247514f4142592e676966.gif

<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-{$version}/build/g6.js"></script>


快速试用

创建一个 G6 的关系图仅需要下面几个步骤:

  1. 创建关系图的 Html 容器
  2. 引入数据源
  3. 创建关系图
  4. 设置数据源,渲染

1. 创建容器

<div id="mountNode"></div>


2. 引入数据源

引入数据源是需要声明节点和边,分别用数组表示


const data = {
  nodes: [{
    id: 'node1',
    x: 100,
    y: 200
 },{
    id: 'node2',
    x: 300,
    y: 200
 }],
  edges: [{
    source: 'node1',
    target: 'node2'
 }]
};

注意:

3. 创建关系图

创建关系图时仅需要设置容器、宽和高


const graph = new G6.Graph({
  container: 'mountNode',
  width: 500,
  height: 500
});


4. 设置数据源,渲染


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


最终的结果:

image.png

更多

本章仅仅介绍了如何安装以及显示最简单的场景,在后面的章节中我们会教会你:

提示