d3.js v5可折叠径向树实现：linkRadial渲染空白问题求解

页面空白的核心原因 #

• 单位不匹配导致坐标完全偏移
  d3.linkRadial() 要求angle参数传入弧度值，但d3.tree()在设置size([360, ...])时，输出的x坐标是0-360的角度值。当前代码未做弧度转换，直接将角度值传入角度参数，计算出的路径坐标远超出800x800的SVG画布范围，因此DOM中能查到生成的路径元素，但视口内无可见内容。
  修正前的错误定义：

  var diagonal = d3.linkRadial()
    .angle(function(d) { return d.x; }) // 直接传角度值，未转弧度
    .radius(function(d) { return d.y; })
  

  修正后的参数映射：

  var diagonal = d3.linkRadial()
    .angle(function(d) { return d.x / 180 * Math.PI; }) // 角度转弧度，和v3版逻辑保持一致
    .radius(function(d) { return d.y; })
  

• 缺失基础SVG样式
  默认SVG路径元素以黑色填充渲染，连线类元素不设置fill: none会形成实心色块，线条无法正常显示。需要补充对应类别的基础样式：

  .node circle {
    cursor: pointer;
  }
  .node text {
    font-size: 12px;
  }
  .link {
    fill: none;
    stroke: #cccccc;
    stroke-width: 1.5px;
  }
  

• 层级对象重复初始化
  当前update函数内每次执行都会重新调用hierarchy(root)生成全新的层级实例，会丢失之前暂存的x0、y0过渡位置信息，导致折叠展开动画失效。应在组件初始化阶段一次性创建层级根对象，后续update直接基于该实例计算布局。
  修正后的初始化逻辑：

  // 初始化阶段一次性生成hierarchy对象
  const treeRoot = d3.hierarchy(input);
  root = treeRoot;
  root.x0 = diameter / 2;
  root.y0 = 0;
  

其他适配注意点 #

• Angular环境下不要直接选择body挂载SVG，优先绑定组件模板内的容器元素，避免视图样式隔离导致的定位异常。
• 连线入场、退场的过渡参考位置，应使用父节点的上一帧坐标，不要直接引用当前更新后的源节点坐标，否则会出现折叠动画位置跳变的问题。

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