如何在d3.js中不依赖JSON值为每个层级添加不同类名

当前代码问题 #

现有getCircleClasses函数无法区分不同层级的节点：

• 根节点固定为node-L00，但所有非根节点仅统一设置为node-L，没有生成对应层级的编号
• 无法实现每个层级节点拥有唯一类名的需求

解决方案：通过父节点链计算层级 #

我们可以通过遍历节点的父链来计算当前节点的层级，以此生成对应类名，无需依赖JSON中的层级字段：

// 生成类名字符串
function getCircleClasses(d) {
  // 计算当前节点层级：根节点层级为0，子节点逐层递增
  let level = 0;
  let currentNode = d;
  while (currentNode.parent) {
    level++;
    currentNode = currentNode.parent;
  }
  // 格式化层级为两位数字（保持和根节点类名格式一致）
  let levelClass = `node-L${level.toString().padStart(2, '0')}`;
  // 保留原有逻辑：有子节点则追加emphasis类
  if (d.children) {
    levelClass += ' emphasis';
  }
  return levelClass;
}

代码说明 #

• 遍历节点的父节点链统计层级，根节点无父节点，层级为0
• 用padStart(2, '0')将层级转为两位数字格式，确保类名统一为node-LXX的形式
• 保留原有逻辑：节点包含子节点时，添加emphasis类

最终效果 #

• 根节点：node-L00（若有子节点则为node-L00 emphasis）
• 一级子节点：node-L01（若有子节点则为node-L01 emphasis）
• 二级子节点：node-L02（若有子节点则为node-L02 emphasis）
  以此类推，每个层级都会生成唯一对应的类名。

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