antvis/G6

G6自定义节点嵌入G2图形,如何更新G2的大小和位置,changeSize方法会更改整个G6 canvas的大小 #4632

YiXunOc posted onGitHub

Describe the bug

G6自定义节点嵌入G2图形,如何更新G2的大小和位置,changeSize方法会更改整个G6 canvas的大小; 使用chart.changeSize方法会更改整个G6的canvas大小; 使用chart.destory方法销毁G2chart是,会销毁整个G6的内容。

Your Example Website or App

可使用G6示例:https://g6.antv.antgroup.com/zh/examples/item/customNode/#lineChartNode

Steps to Reproduce the Bug or Issue

1、G6中嵌入G2: `// 实际开发中把 (Chart || window.Chart) 换成 Chart // Replace (Chart || window.Chart) by Chart in your project const view = new (Chart || window.Chart)({ group, padding: 5, width: 360, height: 70, x: 20, y: 100, });

  view.data(cfg.trendData);

  view.line().position('genre*sold').color('#9AD681').shape('dash');

  view.legend('genre', false);

  view.axis('sold', false);

  view.render();`

 keyShape.set('view', view);

2、使用changeSize修改view宽和高: chart.changeSize(100, 200);

3、预期结果:仅G2chart宽高变化; 实际结果:画布内容消失,再次点击画布,出现原有内容,但G6节点的宽高被修改。

Expected behavior

预期结果:仅G2chart宽高变化;G6自身内容不受影响。

Screenshots or Videos

No response

Platform

  • OS: Windows
  • Browser: Chrome
  • Version: 104

Additional context

No response


@YiXunOc 目前不太确定你是用的G6版本和G2版本,建议你给个codesandbox复现下问题

posted by pomelo-nwu almost 2 years ago

如果你想改变节点大小,应该通过节点的大小配置来控制,然后在自定义节点中读取配置,根据配置给定节点中各个图形包括 G2 图表的大小。下面例子中我简单改了一下主要图形的大小,你这里应当根据 size 继续调整其他文本的位置和大小

https://codesandbox.io/s/confident-gagarin-f8vnv6?file=/index.js

posted by Yanyan-Wang almost 2 years ago

OK ,了解。 看您提供的demo,还是通过重绘G2图形来实现的。但这种方式不知是否会导致浏览器内存的增长且不能被及时回收,毕竟每次重绘都会重新创建Chart/View

posted by YiXunOc almost 2 years ago

Fund this Issue

$0.00
Funded

Pull requests