[Bug]: 自定义节点拖拽节点,连线错乱
- Dominant language
- TypeScript
- Stars
- 12.3k
- Forks
- 1.6k
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug / 问题描述
在官网示例上写了一个demo,把下面的代码复制进去就能复现
https://g6.antv.antgroup.com/examples/element/custom-node/#g2-activity-chart
拖拽自定义节点,连线错乱
```javascript
import { Circle as CircleGeometry } from '@antv/g';
import { renderToMountedElement, stdlib } from '@antv/g2';
import { Circle, ExtensionCategory, Graph, register } from '@antv/g6';
const fontStyle = {
fontSize: 3.6, // 字体大小
fill: '#333', // 填充颜色
fontWeight: 400, // 字体粗细
textAlign: 'center', // 字体对齐方式
};
export default class PiePlugin extends Circle {
get nodeData() {
return this.context.graph.getNodeData(this.id);
}
onCreate() {
// const radius = this.shapeMap.key.style.r;
// 创建一个图形
const group = this.upsert(
'circle-container',
CircleGeometry,
{
// cx: 0, // x 坐标
// cy: 0, // y 坐标
r: 18, // 圆半径
fill: '#fff', // 填充颜色
// stroke: '#fff', // 描边颜色
// fillOpacity: 1, // 填充透明度
},
this.shapeMap.key,
);
// 获取数据
let pieData = [{
"ieCode": "AC",
"name": "AC:gateway",
"version": "v1.10.0",
"avgDuration": 149,
"count": 285,
"errorCount": 0,
"errorRate": 0,
"qps": 0.95,
"apdex": 0.9772,
"traceQueryParam": "service=gateway"
}];
const dataItem = {
"ieCode": "AC",
"name": "AC:gateway",
"version": "v1.10.0",
"avgDuration": 149,
"count": 285,
"errorCount": 0,
"errorRate": 0,
"qps": 0.95,
"apdex": 0.9772,
"traceQueryParam": "service=gateway"
};
// 渲染pie图
renderToMountedElement(
{
type: 'facetRect',
data: pieData,
encode: { x: 'name' },
axis: false,
legend: false,
tooltip: false,
children: [
{
x: -18, // 图表的起始 x 坐标
y: -9, // 图表的起始 y 坐标
width: 36, // 图表的宽度
height: 18, // 图表的高度
type: 'view',
frame: false,
coordinate: {
type: 'theta',
innerRadius: 0.8,
outerRadius: 1,
},
tooltip: false,
children: [
{
type: 'interval',
data: [
{
...dataItem,
count: Number(dataItem.count) - Number(dataItem.errorCount),
color: '#7BBC61',
},
{ ...dataItem, name: '其他', count: dataItem.errorCount, color: '#FF8E4D' },
],
encode: {
y: 'count',
color: 'color',
},
scale: { color: { type: 'identity' } },
style: { fill: '#7BBC61' },
tooltip: false,
},
...(dataItem.type !== 'first'
? [
// 调用数
{
type: 'text',
encode: {
text: '调用数:', // Text Annotation 内容
},
style: {
...fontStyle,
textBaseline: 'middle',
dy: -5.6, // y 方向的偏移量
dx: -3, // x 方向的偏移量
x: '50%', // Point 定位位置
y: '50%',
},
tooltip: false,
},
// 调用数数值
{
type: 'text',
encode: {
text: '1',
},
style: {
...fontStyle,
textBaseline: 'middle',
dy: 8.8,
dx: 7,
x: '50%',
y: '50%',
},
tooltip: false,
},
// 服务延时
{
type: 'text',
encode: {
text: '服务延时:',
},
style: {
...fontStyle,
textBaseline: 'middle',
dy: 0,
dx: -5,
x: '50%',
y: '50%',
},
tooltip: false,
},
// 服务延时数值
{
type: 'text',
encode: {
text: '2',
},
style: {
...fontStyle,
textBaseline: 'middle',
dy: 0,
dx: 7,
x: '50%',
y: '50%',
},
tooltip: false,
},
// 错误数标签
{
type: 'text',
encode: {
text: '错误数:',
},
style: {
...fontStyle,
textBaseline: 'middle',
dy: 5.6,
dx: -3.4,
x: '50%',
y: '50%',
},
tooltip: false,
},
// 错误数数值
{
type: 'text',
encode: {
text: '3',
},
style: {
...fontStyle,
textBaseline: 'middle',
dy: 5.4,
dx: 7,
x: '50%',
y: '50%',
},
tooltip: false,
},
// 名称标签
{
type: 'text',
encode: {
text: '3'
},
style: {
...fontStyle,
textBaseline: 'middle',
x: '50%',
y: '-10%',
},
tooltip: false,
},
]
: []),
],
},
],
},
{
group,
library: stdlib(),
externals: {},
},
);
}
}
let data = {
nodes: [{ id: 'node1' }, { id: 'node2' }],
edges: [{ source: 'node1', target: 'node2' }],
}
register(ExtensionCategory.NODE, 'activity-chart', PiePlugin);
const graph = new Graph({
container: 'container',
// autoFit: 'view',
animation: false,
layout: {
type: 'antv-dagre', // 拓扑图布局类型
rankdir: 'LR', // 可选,默认为图的中心
align: 'DL', // 可选
nodesep: 10, // 可选
ranksep: 20, // 可选
},
behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'], // , 'drag-element' 拖动节点,
node: {
type: 'activity-chart', // 节点默认类型
style: {
size: 18, // 节点默认大小
style: { fill: '#fff' }, // 节点默认样式
},
// size: [36, 18],
state: {
hover: {
stroke: '#b0d6b1', // hover节点描边颜色
lineWidth: 1, // hover节点描边宽度
shadowBlur: 0, // hover节点阴影展示宽度
},
active: {
stroke: '#397f3c', // 点击节点描边颜色
lineWidth: 1, // 点击节点描边宽度
shadowBlur: 0, // 点击节点阴影展示宽度
},
},
},
edge: {
style: {
lineWidth: 0.4, // 连接线宽度
stroke: '#ddd', // 连接线颜色
// endArrow: {
// path: 'M 0,0 L 4,2 L 4,-2 Z',
// fill: '#ddd', // 箭头颜色
// }, // 连接线箭头配置
endArrow: true, // 结束端箭头
// endArrowType: 'vee', // 箭头类型
labelFontSize: 3.6, // 字体大小
labelFill: '#333', // 字体颜色
labelFontWeight: 400, // 字体加粗情况
labelLineHeight: 5, // 字体行高
labelStroke: '#fff', // 字体描边
labelLineWidth: 3,
}, // 连接线上的描述信息配置
},
});
graph.setData(data);
graph.render();
```
### Reproduction link / 复现链接
_No response_
### Steps to Reproduce the Bug or Issue / 重现步骤
_No response_
### Version / 版本
🆕 5.x
### OS / 操作系统
- [x] macOS
- [ ] Windows
- [ ] Linux
- [ ] Others / 其他
### Browser / 浏览器
- [x] Chrome
- [ ] Edge
- [ ] Firefox
- [ ] Safari (Limited support / 有限支持)
- [ ] IE (Nonsupport / 不支持)
- [ ] Others / 其他
Contributor guide
No contributing guide indexed for this repository
Research direction
Begin with the linked G2 activity-chart example and the custom node's onCreate and renderToMountedElement path. Reproduce the issue with drag-element enabled, then trace how dragging affects the connection rendering. Done means custom nodes can be dragged without their edges becoming disordered, with the supplied example still rendering correctly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100