有如下的一份数据,如何使用 G6 让两个节点之间连多条边?
const data = {
nodes: [{
id: 'node1',
x: 100,
y: 150,
label: 'node1',
}, {
id: 'node2',
x: 300,
y: 150,
label: 'node2'
}],
edges: [{
source: 'node1',
target: 'node2'
},
{
source: 'node2',
target: 'node1'
}
]
};
接到上面这个问题后,我们马上就开始动手,二话不说先撸出了下面这段代码。
const graph = new G6.Graph({
container: GRAPH_CONTAINER,
width: 500,
height: 500,
defaultNode: {
style: {
fill: '#DEE9FF',
stroke: '#5B8FF9'
},
labelCfg: {
style: {
fontSize: 12
}
}
},
defaultEdge: {
style: {
stroke: '#e2e2e2'
}
}
});
graph.data(data);
graph.render();
看起来心情还不错,给节点和边都设置了样式。
运行上面的代码以后,却发现现实是如此的残酷,说好的两条边哪去了,怎么还只有一条呢?
G6.png
难道是线太直了,果断换成贝塞尔曲线。
const graph = new G6.Graph({
// ...
defaultEdge: {
shape: 'cubic',
style: {
stroke: '#e2e2e2'
}
}
});
// ...
难道是弯过头,怎么还是这个鬼样子?
G6.png
对了,G6 还支持
quadratic
类型的边,也拿来试试吧。
const graph = new G6.Graph({
// ...
defaultEdge: {
shape: 'quadratic',
style: {
stroke: '#e2e2e2'
}
}
});
// ...
神奇,居然可以了。
G6.png
这个时候,突然想起,G6 3.1 版本新增了一个 polyline
类型的边。
const graph = new G6.Graph({
// ...
defaultEdge: {
shape: 'polyline',
style: {
stroke: '#e2e2e2'
}
}
});
// ...
G6.png
拖动下节点看看。
G6.png
这什么鬼东西,看来还是
quadratic
香啊。
这个时候,PD 突然说到,两个节点之间需要显示3条边,what,这不 so easy 吗?
年轻的你很开心地把数据改成了这样:
const data = {
nodes: [{
id: 'node1',
x: 100,
y: 150,
label: 'node1',
}, {
id: 'node2',
x: 300,
y: 150,
label: 'node2'
}],
edges: [{
source: 'node1',
target: 'node2'
},
{
source: 'node2',
target: 'node1'
},
{
source: 'node2',
target: 'node1'
}
]
};
然而,执行结果却很骨感。
G6.png
新加的边哪去了?
就正在你 百思不得骑姐其解 的时候,突然灵光一闪,想到了原来 G6 还是强大的黑科技「自定义边」。
有了这个黑科技,什么样的需求,那还不是分分钟的事。
当然了,在使用「自定义边」的之前,有两件事还是需要明确下的:
- 两个节点之间同方向超过一条边的,总需要有个标识来区分;
- 需要有一个值控制边的弯曲度,以防边重叠。
我们就在边数据中添加一个 edgeType 用于区分不同的边。有了这个约定以后,就可以开始动手撸码了。
自定义边后的效果如下:
G6.jpg
完善的自定义边的代码如下:
const edgeTypeColorMap = {
type1: ['#531dab', '#391085', '#391085'],
type2: ['#d9d9d9', '#bfbfbf', '#8c8c8c'],
type3: ['#d3adf7', '#b37feb', '#9254de']
}
const defaultConf = {
style: {
lineAppendWidth: 5,
lineDash: [0, 0],
lineDashOffset: 0,
opacity: 1,
labelCfg: {
style: {
fillOpacity: 1
}
}
},
/**
* 绘制边
* @override
* @param {Object} cfg 边的配置项
* @param {G.Group} group 边的容器
* @return {G.Shape} 图形
*/
drawShape(cfg, group) {
const item = group.get('item')
const shapeStyle = this.getShapeStyle(cfg, item);
const shape = group.addShape('path', {
className: 'edge-path',
attrs: shapeStyle
});
return shape;
},
drawLabel(cfg, group) {
const labelCfg = cfg.labelCfg || {}
const labelStyle = this.getLabelStyle(cfg, labelCfg, group)
const text = group.addShape('text', {
attrs: {
...labelStyle,
text: cfg.label,
fontSize: 12,
fill: '#404040',
cursor: 'pointer'
},
className: 'edge-label'
})
return text
},
/**
* 获取图形的配置项
* @internal 仅在定义这一类节点使用,用户创建和更新节点
* @param {Object} cfg 节点的配置项
* @return {Object} 图形的配置项
*/
getShapeStyle(cfg, item) {
const { startPoint, endPoint } = cfg
const type = item.get('type')
const defaultStyle = this.getStateStyle('default', true, item)
if(type === 'node') {
return Object.assign({}, cfg.style, defaultStyle);
}
const controlPoints = this.getControlPoints(cfg);
let points = [ startPoint ]; // 添加起始点
// 添加控制点
if (controlPoints) {
points = points.concat(controlPoints);
}
// 添加结束点
points.push(endPoint);
const path = this.getPath(points);
const style = Object.assign({}, { path }, cfg.style, defaultStyle);
return style;
},
getControlPoints(cfg) {
let controlPoints = cfg.controlPoints; // 指定controlPoints
if (!controlPoints || !controlPoints.length) {
const { startPoint, endPoint } = cfg;
const innerPoint = G6.Util.getControlPoint(startPoint, endPoint, 0.5, cfg.edgeOffset || 30);
controlPoints = [ innerPoint ];
}
return controlPoints;
},
/**
* 获取三次贝塞尔曲线的path
*
* @param {array} points 起始点和两个控制点
* @returns
*/
getPath(points) {
const path = [];
path.push([ 'M', points[0].x, points[0].y ]);
path.push([ 'Q', points[1].x, points[1].y, points[2].x, points[2].y ]);
return path;
},
/**
* 根据不同状态,获取不同状态下的样式值
* @param {string} name
* @param {string} value
* @param {Item} item
*/
getStateStyle(name, value, item) {
const model = item.getModel()
const { style = {} } = model
const defaultStyle = Object.assign({}, this.style)
// 更新颜色
return {
...defaultStyle,
lineWidth: 1,
stroke: edgeTypeColorMap[model.edgeType] && edgeTypeColorMap[model.edgeType][0],
...style
}
},
/**
* 拖动时更新path及边的label
*
* @param {object} cfg 边的model
* @param {Edge} item 边的实例
*/
update(cfg, item) {
const { data, style,
startPoint, endPoint, labelCfg = {} } = cfg
const group = item.getContainer()
const model = data || cfg
const defaultStyle = Object.assign({}, this.style, {
lineWidth: 1,
stroke: edgeTypeColorMap[model.edgeType] && edgeTypeColorMap[model.edgeType][0]
}, style)
const { opacity, onlyHideText } = defaultStyle
// 更新 path
const keyShape = item.getKeyShape();
const controlPoints = this.getControlPoints(cfg);
keyShape.attr({
path: [
['M', startPoint.x, startPoint.y],
['Q', controlPoints[0].x, controlPoints[0].y, endPoint.x, endPoint.y]
],
...defaultStyle
});
const labelStyle = this.getLabelStyle(cfg, labelCfg, group);
const text = group.findByClassName('edge-label');
const attrs = {
...labelStyle,
fillOpacity: onlyHideText ? 0 : opacity === 0 ? opacity : 1,
fill: '#404040'
}
if(text) {
text.resetMatrix();
text.attr(attrs);
}
}
};
G6.registerEdge('quadratic-label-edge', defaultConf, 'quadratic');
const GRAPH_CONTAINER = 'container';
const data = {
nodes: [{
id: 'node1',
x: 100,
y: 150,
label: 'node1',
}, {
id: 'node2',
x: 300,
y: 150,
label: 'node2'
}],
edges: [{
source: 'node1',
target: 'node2',
edgeType: 'type1'
},
{
source: 'node2',
target: 'node1',
edgeType: 'type2'
},
{
source: 'node2',
target: 'node1',
edgeType: 'type3',
edgeOffset: -20
}
]
};
const graph = new G6.Graph({
container: GRAPH_CONTAINER,
width: 500,
height: 500,
modes: {
default: [{
type: 'drag-node',
delegate: false
}]
},
defaultNode: {
style: {
fill: '#DEE9FF',
stroke: '#5B8FF9'
},
labelCfg: {
style: {
fontSize: 12
}
}
},
defaultEdge: {
shape: 'quadratic-label-edge',
}
});
graph.data(data);
graph.render();
到这里为止,我们也就实现了让两个节点之间展示多条边的功能。
G6 是 AntV 团队的图可视化引擎,更多动态请关注我们的 GitHub,求关注,求 Star。