Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: update to g@6.0 for better performance #6149

Merged
merged 15 commits into from
Apr 8, 2024
Merged

feat: update to g@6.0 for better performance #6149

merged 15 commits into from
Apr 8, 2024

Conversation

xiaoiver
Copy link
Contributor

@xiaoiver xiaoiver commented Mar 25, 2024

升级到 @antv/g@6.0
https://github.com/antvis/G/releases/tag/%40antv%2Fg%406.0.0

主要修改包括:

  • Group / CustomElement x/y 改为 transform 表示
  • 属性名规范:Pathpath -> d
  • GUI Axis title transform 修改,通过主题中的 titleTransform 调整到之前同样的位置
  • 移除 runtime.enableCSSParsing = false; 现默认开启
  • 添加 circlehollowCircle 用于绘制较高性能的散点图

之前版本遗留 bug 修复和 hack 写法移除:

  • 使用动画 keyframe 必须添加 scale(1, 1) translate(0, 0) 用于配平
  • morphing 动画后需要手动重置 transform
  • 无法实现 pie chart 中 hover 扇形固定 transformOrigin 缩放特性

对比截图目前不一致:

  • animation-soldIntervalKeyframe
  • chart-emit-brush-highlight-axis-vertical
  • chartChangeDataFacet
  • 少量截图中 class 和 transform 顺序不一致导致 CI 挂
  • shapeToShape 动画问题,在动画过程中触发 tooltip 报错:
    • static-weatherLineMultiSlider
    • tooltip-stateAgesIntervalScrollbar
    • interaction-alphabetIntervalActiveScrollbar
截屏2024-03-26 下午8 01 08

性能对比

例子太多有些卡甚至页面崩溃,拆分成多个 OB 文档

line chart scatter interval

@hustcc
Copy link
Member

hustcc commented Apr 3, 2024

这个图形用 G2 的 beta 版本会出现问题。https://observablehq.com/d/f404e5b5f5382392?collection=@antv/cases-of-interesting-visualization

@xiaoiver
Copy link
Contributor Author

xiaoiver commented Apr 8, 2024

这个图形用 G2 的 beta 版本会出现问题。https://observablehq.com/d/f404e5b5f5382392?collection=@antv/cases-of-interesting-visualization

规范了下属性名和 SVG 保持一致。Path 的路径定义属性应该是 d

const p = document.createElement('path', {
  style: {
    d: path, // 这里属性名改成 d 就好了
    inset: 1,
    fill: value.color,
  },
});

@xiaoiver
Copy link
Contributor Author

xiaoiver commented Apr 8, 2024

截图问题都已经修复,CI 测试用例都过了,但构建会报错(本地正常):

[!] (plugin terser) TypeError: sources.at is not a function

@xiaoiver xiaoiver requested a review from pearmini April 8, 2024 07:04
@xiaoiver xiaoiver merged commit 72012e8 into v5 Apr 8, 2024
2 checks passed
@xiaoiver xiaoiver deleted the fix-transform branch April 8, 2024 08:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants