Edge centered when using renderNode

Hi, I’m trying to use the renderNode function to change the color of the node, as well as the border thickness and color.

Here is my code :

const onRenderNode = (nodeRef: any,data: any,index: number,selected: boolean,hovered: boolean) => {
        return (
            <g>
                <symbol viewBox="0 0 150 150" id={`myNode-${data.id}`} width="150" height="150">
                    <rect  id={`${data.type}`}  x="0" y="0" rx="4" ry="4" height="50" width="100" fill={(data.hexColor)?data.hexColor:"#FF00FF"} stroke="#FFFF00" strokeWidth={(hovered)?"4":"0%"} onContextMenu={(e)=>contextMenuHandler(e,data)}/>
                </symbol>
                <use xlinkHref={`#myNode-${data.id}`} x="-50" y="-25"></use>
            </g>
            );
    }

I added an id property to data to be able to link this to my model

The probleme is the the arrow is pointing in the middle of the node, like this :

And I don’t know what i’m missing here, can you help me ?

Have a nice day !

[Aviemusca]

I’m not sure what the problem is for mbonig’s case. But as a general comment for others, it seems crucial to give the className of “node” to the returned use tag in the renderNode function, for the edge to follow the svg contour.

[mbonig]

I’m having the same issue as OP. I’ve got the following renderNode:

const renderNode = (nodeRef, node: MapNode, id, selected, hovered) => {
    const children = node.type.sort().reverse().map(t => (<use
      id={t}
      key={t}
      x={-100 / 2}
      y={-100 / 2}
      width={100}
      height={100}
      xlinkHref={'#' + t}
    />));

    return (
      <g className="node"
              x={-100 / 2}
              y={-100 / 2}
              width={100}
              height={100}>
        {children}
      </g>
    );
  };

where the linked shapes look like this:

<symbol viewBox="0 0 100 100" id="1_slow" width="100" height="100" fill={SLOW_COLOR}>
      <circle r={10} cx={50} cy={50}/>
</symbol>

But I have my edges overlapping the nodes and going all the way to the center:

The two examples I can find of using this both don’t use the renderNode function, and just rely on the types, I think this problem is specific to using the renderNode, are there examples of that somewhere?