🐛SheetComponent 在单元格内绘制 AntV/G 图形没有生效

[Junjia Chen]

🏷 Version

Package	Version
@antv/s2	2.0.0-next.15
@antv/s2-react	2.0.0-next.14

Sheet Type

• PivotSheet

🖋 Description

sandbox: https://codesandbox.io/p/sandbox/s2-debug-sandbox-84tdfg?file=%2Fsrc%2FS2Table.js
代码基本是copy官方文档，但改成 react SheetComponent，G的图形没有渲染出来

sandbox好像有时也显示不出来页面... ，打开为单独tab就没问题

⌨️ Code Snapshots

🔗 Reproduce Link

🤔 Steps to Reproduce

😊 Expected Behavior

😅 Current Behavior

💻 System information

Environment	Info
System	Ubuntu 20.04
Browser	chrome: v116.0.5845.96

[Gxyrious]

sandbox的链接没权限or不存在

[Junjia Chen]

sandbox的链接没权限or不存在

开放权限了，辛苦再看下

[Gxyrious]

貌似是渲染不出来，但我直接用@antv/s2去渲染G2和G都可以的。这个方法也只提到G2的支持，好像没涉及G。

不知道你需求是什么，我遇到的一个问题是，直接渲染的G的x和y貌似是全局的，官网这个例子里把3换掉，那个小绿点的位置始终不变。

// 3. 手动获取指定单元格实例 (Group) 后绘制任意图形
const targetCell = s2.facet.getDataCells()[3];

必须根据dataCell把坐标取到，再设置style才行。

targetCell?.appendChild(
  new Rect({
    style: {
      x: targetCell.meta.x, // 这两个坐标是在整个dataCell范围内定位的
      y: targetCell.meta.y,
      width: 20,
      height: 20,
      fill: '#396',
      fillOpacity: 0.8,
      stroke: '#ddd',
      strokeOpacity: 0.8,
      lineWidth: 4,
      radius: 10,
      zIndex: 999,
    },
  }),
);