本文详解如何在 d3.js 构建的可折叠树图中，通过监听节点点击事件，实时更新 html 页面中指定元素（如 `
`）的文本内容为所选节点的名称，解决 `d3.select().text(function(d) {…})` 无法直接绑定数据的问题。
在 D3 的树状图（如 collapsible tree）中，节点是动态生成的 SVG 元素，其数据绑定（data()）仅作用于 D3 选择集内部；而 d3.select(“p”).text(function(d) {…}) 中的 d 并非来自树节点数据流——它没有上下文数据绑定，因此该写法不会生效。正确做法是在节点点击事件处理器中显式获取当前节点数据，并更新目标 DOM 元素。
✅ 正确实现方式：在 click 回调中更新文本
你需要将文本更新逻辑写入节点的 .on(“click”, …) 事件监听器内，并确保目标元素具有唯一标识（如 id=”node-info”），便于精准选取：
nodeEnter.on("click", (event, d) => {
// 切换子节点展开/折叠状态
d.children = d.children ? null : d._children;
// 触发树图重绘
update(d);
// ✅ 关键：在此处更新外部 HTML 文本
d3.select("#node-info").text(d.data.name);
});
⚠️ 注意：d.data.name 是标准写法（D3 v7+ 中 d3.hierarchy() 创建的节点对象，原始数据存于 d.data 属性下）。若使用旧版 D3（v6 或更早），可能为 d.name，请根据实际数据结构调整。
? HTML 结构建议（配合 JS 使用）
为清晰分离信息，推荐将展示区域独立放置于 SVG 外部，并赋予 ID：
