keyShape has no effect

[andreasnett]

• [ x] I have searched the issues of this repository and believe that this is not a duplicate. (https://github.com/antvis/G6/issues/1647 provides no solution)

Reproduction link

Steps to reproduce

Create custom shape Instanciate shape

Environment	Info
g6	4.1.4
System	Mac OS
Browser	Chrome

---

Also tried copying over some examples from the web page. Won't work. The width of the keyshape is broken.

[Yanyan-Wang]

Hi, andreasnett.

fill of the rect should be a string but in your demo it is 0. If you want a transparent rect, you should assign opacity: 0 to the rect but not assign fill to an invalid value

[andreasnett]

Hi Yanyan, thanks. I'm afraid this does not have any effect on the outcome

[Yanyan-Wang]

What is your expectation? Do you mean the rect does not show up? Try to assign fill: '#f00' at line 13 in your demo

[andreasnett]

The rect shows up but the keyShape isn't affected. The next node is placed on top of the custom one.

You can see "Node 9" on top of the custom node that contains all P1, P2, P3, P4

[Yanyan-Wang]

I modified your demo: https://codesandbox.io/s/nice-haibt-5s7k9?file=/index.js

note that the layout will use the size in the node data, or you can define the nodesepFunc for dagre, e.g. nodesepFunc: nodeData => nodeData.nodes.length * radius + offset * (nodeData.nodes.length - 1) https://g6.antv.vision/zh/docs/api/graphLayout/dagre/#layoutcfgnodesepfunc

[andreasnett]

Thanks a lot. It does seem to me that this is quite weird behavior though, having to give a size in the data. I would prefer it if the node handled its own sizing.

For others looking later, size has to be given by the data or the nodesepFunc has to be implemented.