antvis / antvis/G6

[Bug]: 官方样例【持续动画-飞行标记】创建边时,我按照官方提供的代码复刻下来本地后,飞行标记marker变得很大。

Open
#7,631 3 comments 0 reactions 0 assignees View on GitHub
waiting for maintainer
Dominant language
TypeScript
Stars
12.3k
Forks
1.6k
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug / 问题描述

g6版本:5.0.50

Image

```ts
import { Line,CubicHorizontal, Circle, subStyleProps,Group,BaseEdgeStyleProps } from '@antv/g6';

export class FlyMarkerEdge extends Line {

getMarkerStyle(attributes) {
return {
r: 1,
fill: '#c3d5f9',
offsetPath: this.shapeMap.key,
...subStyleProps(attributes, 'marker')
};
}

onCreate() {
const marker = this.upsert('marker', Circle, this.getMarkerStyle(this.attributes), this);
marker?.animate([{ offsetDistance: 0 }, { offsetDistance: 1 }], {
duration: 2.5 * 1000,
iterations: Infinity,
});
}

}
```

```
edge: {
type: 'fly-marker-edge',
style: {
cursor: 'pointer',
},
},
```

最终飞行标记marker变得非常大,跟节点一样大,而我无论如何设置属性值,都没有什么变化。注意,此时我并没有在外部添加任何maker开头的子属性subStyleProps,因此不存在外部属性覆盖了这里的属性配置。
并且,官方示例中extends的是CubicHorizontal,而我尝试改了这个,最后也是一样的:飞行标记marker变得非常大。

Image

### Reproduction link / 复现链接

_No response_

### Steps to Reproduce the Bug or Issue / 重现步骤

_No response_

### Version / 版本

🆕 5.x

### OS / 操作系统

- [ ] macOS
- [x] 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

Start with the official continuous-animation flying-marker example and inspect the FlyMarkerEdge entry points shown here: getMarkerStyle() and onCreate(). Compare the Circle marker's configured r value with the rendered size and check how subStyleProps(attributes, 'marker') is applied. Done means the marker renders at the configured size when no external marker properties are supplied.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.