[5.0.0-beta.32]如何渲染自定义节点

[cidre07]

问题描述

[5.0.0-beta.32]代码和g5官网示例不符，drawOtherShapes方法消失了，base-node.ts的render方法里面只有draw keyshape、badgeshapes、portshapes、haloshapes，请问如果添加自定义形状呢？复写render方法也比较麻烦，icon、label这些形状都没有export。

重现链接

https://codesandbox.io/p/sandbox/competent-mopsa-mn2l3g

重现步骤

https://g6-next.antv.antgroup.com/examples/item/customNode/#card 切到最新版g5跑不通

预期行为

希望提供drawOtherShapes方法

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]
• G6 版本: [4.5.1 ... ]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[dosubot]

For custom node rendering in G6 version 5.0.0-beta.32, where the drawOtherShapes method is missing, the G6 team has updated their documentation to include a tutorial on custom nodes. You can find this tutorial here: Custom Nodes Tutorial. This guide provides a comprehensive overview of customization, including specific sections on nodes and edges, which should help address your issue.

Please note, the tutorial is in Chinese, so you might need to use a translation tool if you're not comfortable with the language.

Regarding the broken sandbox link you provided, it's not accessible, so I'm unable to review your implementation directly. If you could update the link or provide a new one, I'd be more than happy to offer more specific guidance based on your code.

If after consulting the tutorial you still face difficulties or have further questions, feel free to share more details about the challenges you're encountering.

Sources

• v5文档希望增加自定义节点教程

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[Aarebecca]

覆写 render 是可以的

{
  render(attributes, container){
    super.render(attributes, container);
    this.drawMyShapes(attributes, container);
  }

  // 自定义的绘制函数，命名自定
  drawMyShapes(attributes, container) {
      this.upsert(...);
  }
}

[cidre07]

非常感谢！