修改Balkan OrgChart nodeMenu按钮HTML后菜单点击失效问题

原本使用Balkan OrgChart时，nodeMenu功能正常但位置偏右，为左移菜单按钮，我重写了nodeMenuButton的HTML代码。修改后按钮外观改变、鼠标悬停时显示可点击指针，但点击按钮无法唤起nodeMenu。

相关代码 #

图表初始化代码 #

var chart = new OrgChart(document.getElementById("tree"), {
    template: 'myTemplate',
    enableSearch: true,
    scaleInitial: 0.5,
    layout: OrgChart.treeRightOffset,
    sticky: false,
    menu: {
        pdf: { text: "Export PDF" },
        png: { text: "Export PNG" },
        svg: { text: "Export SVG" },
        csv: { text: "Export CSV" }
    },
    toolbar: {
        fit: true,
        expandAll: true,
        collapseAll: true,
    },
    collapse: {
        level: 3,
        allChildren: true
    },
    editUI:  new editForm(),
    nodeBinding:{
        field_0: 'name',
        field_1: 'title',
        img_0: 'avatar'
    },
    nodeMenu: {
        add: { text: "Add" },
        edit: { text: "Edit" },
        remove: { text: "Remove" }
    },
});

修改的nodeMenuButton代码 #

OrgChart.templates.myTemplate.nodeMenuButton =
    '<g style="cursor:pointer;" transform="matrix(1,0,0,1,193,15)" data-ctrl-n-menu-id="{id}">'
    + '<rect x="-4" y="-10" fill="#000000" fill-opacity="0" width="22" height="22">'
    + '</rect>'
    + '<line x1="0" y1="0" x2="0" y2="10" stroke-width="2" stroke="rgb(255, 202, 40)" />'
    + '<line x1="7" y1="0" x2="7" y2="10" stroke-width="2" stroke="rgb(255, 202, 40)" />'
    + '<line x1="14" y1="0" x2="14" y2="10" stroke-width="2" stroke="rgb(255, 202, 40)" />'
    + '</g>';

原因分析与解决方案 #

核心原因 #

Balkan OrgChart的节点菜单按钮依赖内部事件监听机制，重写nodeMenuButton时，虽保留了data-ctrl-n-menu-id="{id}"属性，但存在以下问题：

• 自定义SVG元素未触发OrgChart内部的点击事件逻辑
• 硬编码的transform参数可能导致按钮实际可点击区域与视觉位置不匹配
• 缺少默认按钮的特定类名或事件绑定标识

解决方案 #

方案1：通过CSS调整位置（推荐，无需重写按钮结构）

不重写整个nodeMenuButton，直接用CSS修改按钮位置，保留原有事件绑定：

/* 根据需求调整偏移量，左移按钮 */
.orgchart .myTemplate .node-menu-button {
    transform: translate(-50px, 0) !important;
}

方案2：修复自定义按钮的事件触发

若必须重写按钮结构，需确保点击事件能被OrgChart捕获，添加默认类名并确保可点击区域的属性完整：

OrgChart.templates.myTemplate.nodeMenuButton =
    '<g class="node-menu-button" style="cursor:pointer;" transform="matrix(1,0,0,1,193,15)" data-ctrl-n-menu-id="{id}">'
    + '<rect x="-4" y="-10" fill="#000000" fill-opacity="0" width="22" height="22" data-ctrl-n-menu-id="{id}">'
    + '</rect>'
    + '<line x1="0" y1="0" x2="0" y2="10" stroke-width="2" stroke="rgb(255, 202, 40)" />'
    + '<line x1="7" y1="0" x2="7" y2="10" stroke-width="2" stroke="rgb(255, 202, 40)" />'
    + '<line x1="14" y1="0" x2="14" y2="10" stroke-width="2" stroke="rgb(255, 202, 40)" />'
    + '</g>';

方案3：手动绑定点击事件

若上述方法无效，可手动为按钮绑定点击事件，调用OrgChart内置的菜单显示方法：

chart.on('init', function() {
    document.querySelectorAll('[data-ctrl-n-menu-id]').forEach(btn => {
        btn.addEventListener('click', function() {
            const nodeId = this.getAttribute('data-ctrl-n-menu-id');
            chart.showNodeMenu(nodeId);
        });
    });
});

内容的提问来源于stack exchange，提问作者stan61285