如何在D3可缩放圆形打包图中添加描述文本与可点击跳转链接

• 数据绑定逻辑错误：现有代码直接对已选的text元素执行append操作，未将文本元素与打包图的节点数据绑定，导致元素与数据不关联，缩放后状态无法同步，且生成的DOM结构不符合预期。
• 显示条件不符合需求：原描述文本的显示逻辑d.parent === root仅会展示根节点直接子节点的描述，和需求不符；跳转链接未添加叶子节点判断，会在所有节点上展示。
• 缺少缩放同步更新逻辑：可缩放打包图每次触发缩放、下钻交互后，没有同步更新文本的位置、显示状态，会出现元素错位、消失的问题。
• 类名重复：两个功能不同的文本都使用了description类，后续样式控制、元素选择都会出现冲突。

你需要在节点元素初始化时就绑定好所有文本元素，再在缩放回调中更新状态，示例修正代码如下：

// 初始化每个节点的容器时就添加所有文本元素
const node = g.selectAll("g")
  .data(nodes)
  .join("g")
  .attr("transform", d => `translate(${d.x},${d.y})`)
  .on("click", (event, d) => {
    // 原有点击下钻逻辑保留
    if (d.children) {
      zoomTo(event, d.children);
      event.stopPropagation();
    }
  });

// 1. 添加标题文本
node.append("text")
  .attr("class", "node-title")
  .attr("text-anchor", "middle")
  .attr("dy", "-1.2em")
  .style("font-size", "14px")
  .text(d => d.data.name);

// 2. 添加描述文本
node.append("text")
  .attr("class", "node-description")
  .attr("text-anchor", "middle")
  .attr("dy", "1.2em")
  .style("font-size", "12px")
  .style("display", d => d.data.description ? "block" : "none")
  .text(d => d.data.description);

// 3. 添加叶子节点跳转链接
node.append("text")
  .attr("class", "node-link")
  .attr("text-anchor", "middle")
  .attr("dy", "2.8em")
  .style("font-size", "12px")
  .style("fill", "blue")
  .style("cursor", "pointer")
  .style("display", d => !d.children && d.data.url ? "block" : "none")
  .text("click for more information")
  .on("click", (event, d) => {
    event.stopPropagation(); // 阻止触发节点下钻事件
    window.open(d.data.url, "_blank");
  });

// 原有缩放逻辑中，补充文本的显示状态更新
function zoomTo(event, v) {
  const k = width / v.r / 2;
  x.domain([v.x - v.r, v.x + v.r]);
  y.domain([v.y - v.r, v.y + v.r]);

  // 更新节点位置和文本状态
  node.transition()
    .duration(750)
    .attr("transform", d => `translate(${x(d.x)},${y(d.y)})`)
    .selectAll("text")
    // 根据缩放比例调整字体大小，避免缩放后文本大小异常
    .style("font-size", `${12/k}px`)
    .style("display", function(d) {
      const self = d3.select(this);
      if (self.classed("node-title")) return "block";
      if (self.classed("node-description")) return d.data.description ? "block" : "none";
      if (self.classed("node-link")) return !d.children && d.data.url ? "block" : "none";
    });

  // 原有圆形大小更新逻辑保留
  node.select("circle")
    .transition()
    .duration(750)
    .attr("r", d => k * d.r);
}

• 可根据需求调整不同层级节点的文本显示规则，比如下钻到对应层级时再展示子节点的描述文本
• 如果需要隐藏过小节点的文本，可以在显示判断逻辑中增加d.r > 阈值的判断条件

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