AntvX6-Graph-Edge
2021-04-08 本文已影响0人
泛滥的小愤青
来两个Node,添加Edge
const source = this.graph.addNode({
// shape: 'react',
x: 250,
y: 50,
width: 100,
height: 40,
shape: 'rect',
attrs: { label: { text: 'source-起点' } }
})
// C
const target = this.graph.addNode({
x: 350,
y: 150,
width: 100,
height: 40,
shape: 'circle',
attrs: { label: { text: 'target-终点' } }
})
// 添加边
this.graph.addEdge({
source,
target,
attrs: {
line: {
stroke: 'red', // #a0a0a0
strokeWidth: 1
}
}
})

可以自定义边
// 添加边
this.graph.addEdge({
source,
target,
attrs: {
line: {
stroke: 'red', // #a0a0a0
strokeWidth: 1,
// 自定义的
targetMarker: {
tagName: 'path',
fill: 'yellow', // 使用自定义填充色
stroke: 'green', // 使用自定义边框色
strokeWidth: 2,
d: 'M 20 -10 0 0 20 10 Z'
}
}
}
})
