hello world
// 1. 准备好数据
// node(节点)
let nodes = [
{
id: 1, // 节点 id
x: 0, // 节点 x 坐标
y: 0 // 节点 y 坐标
},
{ id: 2, x: 100, y: 0 }
]
// edge(边)
let edges = [
{
source: '2', // 节点 id，从哪里出发
target: '1' // 节点 id，到哪里结束
}
]
// 2. 初始化对象
let g6 = new G6.Graph({
container: 'container', // 容器 id
fitView: 'cc', // 渲染位置，cc 表示渲染到图表的中间位置(center center)
height: window.innerHeight // 画布高
})
// 3. 渲染数据
g6.read({ edges, nodes })这是渲染出来的效果。Demo源码， 官方文档。
自定义节点
可以看到默认的节点是一个蓝色的圈，如果要想改变节点的样子，就需要用到自定义节点。
// 1. 准备好数据
// node(节点)
let nodes = [
{
id: 1, // 节点 id
x: 0, // 节点 x 坐标
y: 0, // 节点 y 坐标
name: '张三' // 自定义数据
},
{
id: 2,
x: 100,
y: 0,
name: '李四' // 自定义数据
}
]
// edge(边)
let edges = [
{
source: '2', // 节点 id，从哪里出发
target: '1' // 节点 id，到哪里结束
}
]
// 2. 初始化对象
let g6 = new G6.Graph({
container: 'container', // 容器 id
renderer: 'svg',
fitView: 'cc', // 渲染位置，cc 表示渲染到图表的中间位置(center center)
height: window.innerHeight // 画布高
})
// 3. 注册节点
G6.registerNode('rect', {
draw (item) {
const group = item.getGraphicGroup()
const model = item.getModel()
let size = 50
let center = size / 2
// 绘制文本节点
let rect = group.addShape('rect', {
attrs: {
x: 0,
y: 0,
width: size,
height: size,
fill: '#6cf'
}
})
// 绘制圆形
let circle = group.addShape('circle', {
attrs: {
x: center,
y: center,
r: center,
fill: '#ddd',
stroke: '#f06'
}
})
// 绘制文本节点
let text = group.addShape('text', {
attrs: {
x: 0,
y: 0,
fontSize: 20,
fill: '#000',
stroke: 'orange',
text: `id：${model.id}`
}
})
// 绘制 dom 元素
let dom = group.addShape('dom', {
attrs: {
x: 0,
y: 0,
width: size,
height: size,
html: `你好呀${model.name}，你好呀${model.name}`
}
})
return group
}
})
// 4. 使用节点
g6.node({
shape: 'rect'
})
// 5. 渲染数据
g6.read({ edges, nodes })下图是渲染出来的效果。Demo源码，官方文档。
自定义节点的时候有以下现象：
- 添加 shape 有先后顺序，后面会覆盖前面的。像是 dom 的 z-index
- 添加 text 节点的时候，其它 shape 会避让。同样坐标设置的都是 [0, 0]，文字会渲染在顶部。
- 链接线会以 return 元素为基准。如果 return text，线会连在 text 节点那里；如果 return group，就是整体的中间。
- model 里可以取出定义 node 的时候的其它数据，比如例子里的 name。
- 绘制的元素大小指定后，超出的部分会被裁切，比如例子里的 dom。
- 绘制 dom 元素时，需要在初始化对象的时候，指定
new G6.Graph({ renderer: 'svg' })。
自定义边
自定义边的使用方法跟自定义节点的使用方式类似。
// 1. 准备好数据
// node(节点)
let nodes = [
{ id: 1, x: 0, y: 0 },
{ id: 2, x: 100, y: 0 },
{ id: 3, x: 100, y: 50 }
]
// edge(边)
let edges = [
{
source: 1, // 节点 id，从哪里出发
target: 2 // 节点 id，到哪里结束
},
{
source: 1, // 节点 id，从哪里出发
target: 3 // 节点 id，到哪里结束
}
]
// 2. 初始化对象
let g6 = new G6.Graph({
container: 'container', // 容器 id
fitView: 'cc', // 渲染位置，cc 表示渲染到图表的中间位置(center center)
height: window.innerHeight // 画布高
})
// 3. 自定义边
G6.registerEdge('line', {
// 路径
getPath (item) {
const points = item.getPoints()
const start = points[0]
const end = points[points.length - 1]
return [
[ 'M', start.x, start.y ],
[ 'L', end.x, end.y ]
]
},
// 起始（圆形）箭头
startArrow: {
path () {
const r = 5
const x = -5
const y = 0
return [
[ 'M', x, y - r ],
[ 'a', r, r, 0, 1, 1, 0, 2 * r ],
[ 'a', r, r, 0, 1, 1, 0, -2 * r ],
[ 'z' ]
]
},
shorten () {
return 10
},
style (item) {
const keyShape = item.getKeyShape()
const { strokeOpacity, stroke } = keyShape.attr()
return {
fillOpacity: strokeOpacity,
fill: '#fff',
stroke
}
}
}
})
// 4. 使用边
g6.edge({
shape: 'line',
startArrow: true, // 添加头部箭头
color: 'red',
endArrow: true // 添加尾部箭头
})
// 5. 渲染数据
g6.read({ edges, nodes })这是渲染出来的效果。Demo源码，官方文档。
自定义节边的时候有以下现象：
- 自带的边是有透明度灰色的线。
- 设置
{ endArrow: true }之后就会在结束点加上箭头。 - 颜色可以直接设置 color，也可以是同 style 绘制。
添加事件
// 1. 准备好数据
// node(节点)
let nodes = [
{ id: 1, x: 0, y: 0 },
{ id: 2, x: 100, y: 0 },
{ id: 3, x: 100, y: 50 }
]
// edge(边)
let edges = [
{
source: 1, // 节点 id，从哪里出发
target: 2 // 节点 id，到哪里结束
},
{
source: 1, // 节点 id，从哪里出发
target: 3 // 节点 id，到哪里结束
}
]
// 2. 初始化对象
let g6 = new G6.Graph({
container: 'container', // 容器 id
fitView: 'cc', // 渲染位置，cc 表示渲染到图表的中间位置(center center)
height: window.innerHeight // 画布高
})
// 3. 添加事件监听
g6.on('node:click', (e) => {
const { item } = e
const { id, x, y } = item.getModel()
alert(`id:${id}, x:${x}, y:${y}`)
})
// 4. 渲染数据
g6.read({ edges, nodes })事件的监听是组合的，组合方式就是 [对象]:[事件]，'node'，'edge'，'group', 'guide'，都可以自由组合使用，如 node:click, edge:dbclick。
Demo源码，官方文档。