Step 1 创建容器
Step 2 创建关系图
Step 3 配置数据源,渲染
1. 需要在HTML中创建一个用于容纳G6绘制的图的容器,G6在绘制时会在该容器下追加canvas标签,将图绘制其中
<div id="vessel"></div>
2. 创建关系图时,至少需要为图设置容器、宽和高
const graph = new G6.Graph({
container:'vessel',
width:1000,
Height:600,
})
3. G6的数据源为JSON格式的对象,该对象中需要有节点和边字段,分别用数组表示。然后用数据去渲染图。
const data={
nodes:[
{id:'node1',x:100,y:200},
{id:'node2',x:200,y:300}
],
edges:[
{source:'node1', target:'node2'}
]
}
graph.data(data)//读取数据源到图上
graph.render()//渲染图