如何为D3.js折叠树的无子节点添加点击事件？

数据老陈

2026-5-15

问题原因分析

你的问题出在判断逻辑的顺序和叶子节点的初始状态上。咱们一步步拆解两次点击叶子节点的执行流程：

第一次点击叶子节点（比如"A的儿子"）：
- 叶子节点初始状态下，d.children和d._children都是undefined（因为它本身没有子节点）
- 进入else分支：执行d.children = d._children（此时d._children是undefined，所以d.children仍为undefined），随后d._children = null
- 接下来判断if (d.children === null)——但undefined和null在严格相等判断中是不等的，所以alert不会触发
第二次点击同一个叶子节点：
- 此时d.children是undefined，再次进入else分支
- 执行d.children = d._children（现在d._children是第一次点击后设置的null），所以d.children变为null
- 这时候d.children === null条件满足，alert才会触发

简单说，你把叶子节点的判断放在了展开折叠逻辑之后，还误用了严格相等判断，没考虑到叶子节点初始的undefined状态，导致第一次点击不触发提示。

正确实现方式

正确的思路是先判断当前节点是否是叶子节点（没有任何子节点），如果是，直接触发提示并返回；如果不是，再执行正常的展开/折叠逻辑。修改后的代码如下：

function click(d) {
  // 判断是否为叶子节点：既没有子节点，也没有暂存的子节点
  if (!d.children && !d._children) {
    alert(d.id);
    return; // 直接返回，不执行后续展开折叠逻辑
  }

  // 非叶子节点，执行展开/折叠逻辑
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update(d);
}