本文介绍如何在 d3.js 构建的可折叠树图中，通过监听节点点击事件，实时更新 html 页面中指定元素（如 `
`）的文本内容为所选节点的名称。核心在于正确绑定 `click` 事件处理器，并使用 `d.data.name` 访问绑定数据。
在 D3 可折叠树（collapsible tree）中，实现“点击节点 → 展开/收起子树 + 同步更新页面文本”是一个常见需求。但初学者常误用 .text(function(d) {…}) 直接绑定到静态选择器（如 d3.select(“p”)），这会导致函数无上下文执行（d 未定义），而非响应式更新。
✅ 正确做法是：将文本更新逻辑写入节点的 click 事件回调中，利用事件参数 (event, d) 获取当前被点击节点的完整数据对象 d，再调用 d3.select() 更新目标 DOM 元素。
✅ 关键代码示例（D3 v7+）
假设你在 HTML 中已声明一个用于显示节点名称的容器：
