在G6中有什么好的办法可以在hover边的时候在边的中点处显示自定义react组件（随画布缩放），同时点击组件弹出ant.design的popover #4619

@lovelyGFR 可以贴下你的设计稿。我目前的理解是可以通过自定义React组件，监听边的mouseEnter事件来实现展示的组件，代码可以参考：https://github.com/antvis/Graphin/blob/master/packages/graphin/src/components/Tooltip/useTooltip.tsx#L138

@lovelyGFR 可以贴下你的设计稿。我目前的理解是可以通过自定义React组件，监听边的mouseEnter事件来实现展示的组件，代码可以参考：https://github.com/antvis/Graphin/blob/master/packages/graphin/src/components/Tooltip/useTooltip.tsx#L138

大概是这样，hover边才显示这个badge组件，然后点击badge组件弹出popover，但同时badge组件需要随画布缩放，是不是只能同时监听画布的zoom来缩放组件的大小。 还有一个问题就是在我的描述中我使用了ReactDOMServer.renderToString去强转react组件，不知是否恰当

「ReactDOMServer.renderToString去强转react组件」没有尝试过。G6官方的上层组件库 是这么实现的：https://graphin.antv.antgroup.com/components/built-in/tooltip

「ReactDOMServer.renderToString去强转react组件」没有尝试过。G6官方的上层组件库 是这么实现的：https://graphin.antv.antgroup.com/components/built-in/tooltip

那G6中有可以在节点或边定义时使用自定义react组件的例子嘛(之前看的react-node那个库也是套的标签)，因为定义dom的话G6的一些事件（graph.on('node.click')）就不支持，在之后要实现的交互中就会比较苦恼QAQ

@lovelyGFR 直接支持不太好支持，如果是SVG，我们可以用 foreignObject，这样就可以让react托管渲染流程。

@pomelo-nwu 其实在项目中我的renderer定义的就是svg，通过这样的方式

const shape = group.addShape('dom', {
        attrs: {
            class: 'foreign-object-shape-node',
            x: 0,
            y: 0,
            width: NODE_WIDTH,
            height: NODE_HEIGHT,
            html: ReactDOMServer.renderToString(
                <EntityNode
                    entityName={cfg.entityName}
                    entityType={cfg.entityType}
                    editUrl={cfg.editUrl}
                    behavior={cfg.behavior}
                />
            )
        },
        events: true
    });

渲染出来的也确实是foreignObject包裹起来的react组件，但是由于是自定义dom，无法监听

所以说我如果想要让graph监听到我的节点交互事件，还是应该老老实实的一步步画shape的方式进行下去嘛

@lovelyGFR 是的

@lovelyGFR 是的

谢谢您的耐心解答，这帮助了我很多，祝您周末愉快~

方便的话可以点个 Star 鼓励一下，哈哈