使用dendrogram布局时，边的开始和结束位置如何设置

[XiaoWeiKIN]

如下图所示，使用react自定义节点，边从矩形中间出发了，并且没有层级结构

如何实现从节点右侧中心出发，子节点左侧中心结束，如下：

代码如下：

 edge: {
                type: 'cubic-horizontal',
                style: {
                    stroke: '#CED4D9',
                },
            },
            layout: {
                type: 'dendrogram',
                direction: 'LR',
                nodeSep: 150,
                rankSep: 480,
            },

const NodeContent = ({ service, count, errors, operation, selfTime, time, height = 70, isTooltip = false,width }: any) => {
    const sectionStyle = {
        display: 'flex',
        flexDirection: 'column' as const,
        gap: '16px',
        height: '100%',
    };

    // 根据是否为 tooltip 使用不同的文本样式
    const textStyle:any = isTooltip ? {
        fontSize: '14px',
        fontWeight: 500,
        whiteSpace: 'normal',
        wordBreak: 'break-word',
        width: '100%',
    } : {
        fontSize: '14px',
        fontWeight: 500,
        whiteSpace: 'nowrap',
        overflow: 'hidden',
        textOverflow: 'ellipsis'
    };

    const subTextStyle:any = isTooltip ? {
        fontSize: '12px',
        color: '#666',
        whiteSpace: 'normal',
        wordBreak: 'break-word',
        width: '100%',
    } : {
        fontSize: '12px',
        color: '#666',
        whiteSpace: 'nowrap',
        overflow: 'hidden',
        textOverflow: 'ellipsis'
    };

    return (
        <div
            style={{
                background: '#fff',
                borderRadius: isTooltip ? 0 :5,
                border: isTooltip ? 0:'1px solid #e5e7eb',
                boxShadow: isTooltip ? undefined:'0 1px 3px 0 rgba(0, 0, 0, 0.1)',
                width: 'fit-content',
                height: isTooltip ? 'auto' : height,
                overflow: 'visible',
                whiteSpace: 'nowrap',
                display: 'flex',
            }}
        >
            <div
                style={{
                    ...sectionStyle,
                    background: 'rgba(236, 242, 254, 0.5)',
                    padding: '8px 12px',
                    height: isTooltip ? 'auto' : '100%',
                }}
            >
                <div style={textStyle}>
                    {count || 0}/{errors || 0}
                </div>
                <div style={subTextStyle}>
                    {formatDuration(time)}
                </div>
            </div>
            <div
                style={{
                    ...sectionStyle,
                    background: 'rgba(254, 243, 236, 0.5)',
                    flex: 1,
                    padding: '8px 12px',
                    height: isTooltip ? 'auto' : '100%',
                    width: 'fit-content',
                }}
            >
                <div style={textStyle}>
                    {service || '-'}
                </div>
                <div style={subTextStyle}>
                    {operation || '-'}
                </div>
            </div>
            <div
                style={{
                    ...sectionStyle,
                    background:'rgba(236, 254, 239, 0.5)',
                    padding: '8px 12px',
                    height: isTooltip ? 'auto' : '100%',
                }}
            >
                <div style={textStyle}>
                    {formatDuration(selfTime)}
                </div>
                <div style={subTextStyle}>
                    {formatDuration(time)}
                </div>
            </div>
        </div>
    );
};

[XiaoWeiKIN]

看了参考案例是可以的，并不知道哪里配置有问题

[XiaoWeiKIN]

node: {
                type: 'gNode',
                style: {
                    size: [300, 70],
                    ports: [{ placement: 'left' }, { placement: 'right' }],
                    component: (data: any) => <Node data={data} size={[300, 70]}/>,

                },
            },