如何在d3-org-chart的onNodeClick事件中展开并高亮节点

要实现点击节点时展开该节点并修改其颜色，可借助d3-org-chart内置方法和D3的DOM选择能力完成，具体代码修改如下：

var chart = new d3.OrgChart()
    .container('.chart-container')
    .data(dataFlattened)
    .nodeWidth((d) => 250)
    .initialZoom(0.7)
    .nodeHeight((d) => 175)
    .childrenMargin((d) => 40)
    .compactMarginBetween((d) => 15)
    .compactMarginPair((d) => 80)
    .nodeContent(function (d, i, arr, state) {
        return `*** html content obmitted ***`;
    })
    .onNodeClick(function (d) {
        // 1. 切换节点展开/折叠状态
        chart.toggleNode(d);

        // 2. 修改节点颜色
        // 通过节点ID选中对应DOM元素（d3-org-chart默认给节点添加data-node-id属性）
        const nodeElement = d3.select(`[data-node-id="${d}"]`);
        // 直接修改背景色
        nodeElement.style('background-color', '#ffcc00');
        // 也可添加自定义CSS类（推荐，便于样式统一管理）
        // nodeElement.classed('clicked-node', true);
    })
    .render();

关键说明： #

• 展开节点：调用chart.toggleNode(d)方法，会自动切换目标节点的展开/折叠状态，参数d为节点ID或节点数据对象（根据你的数据结构调整）。
• 修改颜色：
  • 利用D3的d3.select方法，通过节点自带的data-node-id属性定位目标节点。
  • 若需要点击其他节点时恢复原节点颜色，可在修改当前节点前，先移除所有节点的高亮样式或类，再给当前节点添加样式。

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