如何基于D3可折叠树的节点点击动态更新HTML段落文本？

问题出在你调用text()的方式上：当你用d3.select("p").text(function(d) { return d.name; })时，回调函数里的d是<p>元素绑定的数据，但你的<p>并没有绑定任何节点数据，所以这个d是undefined，自然无法取出name。

正确的做法是在节点的点击事件处理函数中，直接用当前点击节点的d.name来设置段落文本，步骤如下：

1. 找到你代码中处理节点点击的click函数（对应原示例里的点击逻辑）
2. 在处理完节点折叠/展开的逻辑后，添加一行代码直接赋值：

function click(event, d) {
  // 原有的折叠/展开逻辑
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update(d); // 更新树的渲染
  
  // 直接使用当前点击节点的d.name更新段落
  d3.select("p").text(d.name);
}

这样点击任意节点时，顶部段落就会同步显示该节点的名称，同时树的折叠/展开功能不受影响。

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