D3-DAG Sugiyama点击节点时高亮所有子节点的实现问题

嘿，我看你在使用D3-DAG Sugiyama构建有向无环图时，卡在了点击节点高亮子节点这一步——明明能拿到节点的id数据，却找不到对应的节点实例，对吧？我来帮你捋清楚问题出在哪，以及怎么解决：

问题根源分析 #

你在点击事件里多做了一步没必要的节点查找：dag.descendants().find(node => node.id() === p.data.id)。其实在each回调里的p本身就是当前点击的dag节点实例，完全不需要再去遍历整个节点列表找它。另外，你用node.id()去匹配p.data.id可能也不对——D3-DAG的node.id()默认返回的是节点的内部标识，而非你存在node.data.id里的自定义id，这也是查找失败的核心原因。

具体解决步骤 #

1. 直接使用绑定的节点实例获取子节点 #

在点击事件里，p就是当前点击的节点，调用p.descendants()就能直接拿到该节点以及所有层级的子节点集合（包括节点自身）。

2. 用D3的规范方式修改节点样式 #

你之前直接操作DOM属性selectedNode.srcElement.attributes.fill = 'grey'不符合D3的链式操作规范，容易出问题。应该用D3的attr方法来修改样式，同时记得先恢复所有节点的原始样式，再高亮目标节点，避免样式混乱。

3. 可选：优化高亮的视觉区分度 #

除了修改填充色，还可以给高亮节点加粗描边，让高亮效果更明显。

完整修改后的点击事件代码示例 #

把你原来的点击事件代码替换成下面这段：

nodes
    .each(function (p, j) {
        d3.select(this)
            .on("click", (event) => {
                // 1. 先恢复所有节点的原始样式：填充色回到彩虹色，去掉描边
                nodes.select("circle")
                    .attr("fill", (n) => colorMap.get(n.data.id))
                    .attr("stroke", "none")
                    .attr("stroke-width", 0);
                
                // 2. 获取当前节点的所有后代（包括自身）
                const highlightedNodes = p.descendants();
                
                // 3. 高亮目标节点：改成灰色填充+黑色粗描边
                nodes.select("circle")
                    .filter(n => highlightedNodes.includes(n))
                    .attr("fill", "grey")
                    .attr("stroke", "#000")
                    .attr("stroke-width", 2);
            })
    })

额外提示 #

如果之后你真的需要通过自定义id查找节点，应该用node.data.id来匹配，而不是node.id()，比如：

// 正确的按自定义id查找方式
const targetNode = dag.descendants().find(node => node.data.id === "你要找的id");

备注：内容来源于stack exchange，提问作者arc