AntV/G6 Dagre布局下 节点文字怎样垂直排列

[laipiyang]

我的代码如下：

<div id="container" style="width: 100%; height: 100%"></div>
<script src="https://unpkg.com/@antv/g6@5/dist/g6.min.js"></script>


<script type="text/javascript">
    const {Graph, Rect, register, ExtensionCategory, Badge} = G6;

    const statusColors = {
        1: '#586cb1',
        2: '#4277cf',
        3: '#B7AD99',
    };

    /**
     * 创建自定义节点，继承自 Rect
     */
    class ChartNode extends Rect {
        get data() {
            return this.context.model.getElementDataById(this.id).data;
        }

        getLabelStyle() {
            const text = this.data.name;

            // 部门和岗位节点使用竖排文字
            if (this.data.type > 1) {
                return {
						text: text,
						fill: '#fff',
                		fontSize: 20,
                		fontWeight: 600,
                		textAlign: 'center',
                		transform: [['translate', 0, -10]],
                };
            }

            // 默认样式（总部节点）
            return {
                text: text,
                fill: '#fff',
                fontSize: 20,
                fontWeight: 600,
                textAlign: 'center',
                textBaseline: 'middle',
                transform: [['translate', 0, -5]],
            };
        }

        getKeyStyle(attributes) {
            return {
                ...super.getKeyStyle(attributes),
                fill: statusColors[this.data.type],
            };
        }

        //组件样式：数量
        getTotalStyle(attributes) {
            return {
                text: "(" + this.data.count + ")",
                x: 0,
                y: 15, // 放在主标题下方
                fontSize: 12,
                textAlign: 'center',
                textBaseline: 'middle',
                padding: [0, 4],
                fill: '#fff',
                backgroundFill: statusColors[this.data.type],
            };
        }

        //绘制组件：数量
        drawTotalShape(attributes, container) {
            const statusStyle = this.getTotalStyle(attributes);
            // debugger;
            // 使用数据渲染自定义内容
            this.upsert('count', Badge, statusStyle, container);
        }

        // 在自定义节点类中添加竖显方法 AI错误代码
        // drawVerticalText(text, container, x = 0, y = 0) {
        //     const chars = text.split('');
        //     chars.forEach((char, i) => {
        //         container.addShape('text', {
        //             attrs: {
        //                 x: x,
        //                 y: y + i * 20, // 调整这个值可以改变字符间距
        //                 text: char,
        //                 fontSize: 20,  // 调整字体大小
        //                 fontWeight: 600,
        //                 fill: '#fff',  // 文字颜色
        //                 textAlign: 'center',
        //                 textBaseline: 'middle',
        //             },
        //         });
        //     });
        // }

        // 渲染方法
        render(attributes = this.parsedAttributes, container = this) {

            super.render(attributes, container);
            this.drawTotalShape(attributes, container);

            // 3. 渲染竖排文字 AI生成的错误代码
            // const textGroup = container.addGroup();
            // this.drawVerticalText(this.data.name, textGroup, 0, -10);
        }

    }

    //注册自定义节点
    register(ExtensionCategory.NODE, 'chart-node', ChartNode);

    fetch('/admin/get-organizational')
        .then((res) => res.json())
        .then((data) => {
            const graph = new Graph({
                height: window.innerHeight - 146,
                container: 'container',
                data,
                node: {
                    type: 'chart-node',
                    style: {
                        labelPlacement: 'center',
                        lineWidth: 1,
                        ports: [{placement: 'top'}, {placement: 'bottom'}],
                        radius: 2,
                        shadowBlur: 10,
                        shadowColor: '#e0e0e0',
                        shadowOffsetX: 3,
                        textAlign: 'center',
                        textBaseline: 'middle',
                        fontSize: 12,
                        // 根据节点类型设置不同尺寸
                        size: (d) => {
                            if (d.data.type > 1) {
                                return [50, 140]; // 部门和岗位节点：宽度100，高度140（为竖排文字提供足够空间）
                            }
                            return [160, 50]; // 总部节点：宽度160，高度50
                        },
                        stroke: '#C0C0C0',
                    },
                },
                edge: {
                    type: 'polyline',
                    style: {
                        router: {
                            type: 'orth',
                        },
                        stroke: '#C0C0C0',
                    },
                },
                layout: {
                    type: 'dagre',
                    preventOverlap: true,
                    nodesep: 50,
                    ranksep: 80,
                },
                autoResize: true,
                autoFit: 'view',
                zoomRange: [0.1, 1],
                behaviors: ['zoom-canvas', 'drag-canvas'],
                plugins: [
                    {
                        key: 'minimap',
                        type: 'minimap',
                        size: [240, 120],
                    },
                ],

            });

            graph.render();
        });

</script>

接口返回的数据结构如下：

{
    "nodes": [
        {
            "id": "zongbu",
            "data": {
                "name": "总部",
                "type": 1,
                "count": "100"
            }
        },
        {
            "id": "department_1",
            "data": {
                "name": "财务部",
                "type": 2,
                "count": "7"
            }
        },
        {
            "id": "department_2",
            "data": {
                "name": "商务部",
                "type": 2,
                "count": "8"
            }
        },
        {
            "id": "department_3",
            "data": {
                "name": "产品部",
                "type": 2,
                "count": "4"
            }
        },
        {
            "id": "department_5",
            "data": {
                "name": "技术部，文字可能比较长",
                "type": 2,
                "count": "5"
            }
        },
        {
            "id": "duty_1",
            "data": {
                "name": "财务总监",
                "type": 3,
                "count": "1"
            }
        },
        {
            "id": "duty_2",
            "data": {
                "name": "财务",
                "type": 3,
                "count": "4"
            }
        },
        {
            "id": "duty_3",
            "data": {
                "name": "出纳",
                "type": 3,
                "count": "2"
            }
        },
        {
            "id": "duty_4",
            "data": {
                "name": "商务经理",
                "type": 3,
                "count": "2"
            }
        },
        {
            "id": "duty_6",
            "data": {
                "name": "商务专员",
                "type": 3,
                "count": "6"
            }
        },
        {
            "id": "duty_7",
            "data": {
                "name": "产品总监",
                "type": 3,
                "count": "1"
            }
        },
        {
            "id": "duty_8",
            "data": {
                "name": "产品",
                "type": 3,
                "count": "3"
            }
        },
        {
            "id": "duty_9",
            "data": {
                "name": "研发工程师",
                "type": 3,
                "count": "5"
            }
        }
    ],
    "edges": [
        {
            "source": "zongbu",
            "target": "department_1"
        },
        {
            "source": "zongbu",
            "target": "department_2"
        },
        {
            "source": "zongbu",
            "target": "department_3"
        },
        {
            "source": "zongbu",
            "target": "department_5"
        },
        {
            "source": "department_1",
            "target": "duty_1"
        },
        {
            "source": "department_1",
            "target": "duty_2"
        },
        {
            "source": "department_1",
            "target": "duty_3"
        },
        {
            "source": "department_2",
            "target": "duty_4"
        },
        {
            "source": "department_2",
            "target": "duty_6"
        },
        {
            "source": "department_3",
            "target": "duty_7"
        },
        {
            "source": "department_3",
            "target": "duty_8"
        },
        {
            "source": "department_5",
            "target": "duty_9"
        }
    ]
}

运行结果如下：

如何使部门和岗位节点的文本竖显呢？

[laipiyang]

我想要的效果类似这样：