d3.js 树 - 为指定的子节点设置深度？答案

【问题标题】：d3.js tree - Set depth for specified child nodes?d3.js 树 - 为指定的子节点设置深度？
【发布时间】：2021-09-30 06:07:54
【问题描述】：

如何为树中的指定子节点设置父节点和子节点之间的深度？

例如，下面的代码设置整个树的父子节点之间的深度：

   nodes.forEach(function(d) {
        d.y = (d.depth === 0 ? 50 : d.depth * 230);
    });

那么在下面的 JSON 示例中，将深度设置为 d.name = "Son of Child 2"，其他设置为默认深度？

var treeData =
  {
    "name": "Top Level",
    "children": [
      { 
        "name": "Child 1",
        "children": [
          { "name": "Son of Child 1" },
          { "name": "Daughter of Child 1" }
        ]
      },
      { "name": "Child 2",
        "children": [
          { "name": "Son of Child 2" },
          { "name": "Daughter of Child 2" }
        ] }
    ]
  };

见fiddle

【问题讨论】：

标签： javascript jquery d3.js

【解决方案1】：

您只需将额外条件添加到您的定位函数中：

  nodes.forEach(function(d){ 
        if(d.data.name == "Child 1") d.y = d.depth*180+220; 
        else d.y = d.depth * 180
  });

上面的内容将在具有给定名称的节点的位置上增加 220 像素。

我们需要使用 d.data.name，因为层次结构将原始数据放在数据属性中，以避免层次属性和原始数据之间的重叠。

Here's 一个更新的小提琴。

一个问题是子节点不会有反映父节点位置变化的定位，我们可以添加一个额外的条件来查看给定节点是否具有指定节点作为父节点：

  nodes.forEach(function(d){ 
        if(d.data.name == "Child 1") d.y = d.depth * 180 + 220; 
        else if(d.ancestors().some((a)=>a.data.name == "Child 1")) d.y = d.depth * 180 + 220;
        else d.y = d.depth * 180
  });

唯一的变化是查看给定节点 (d) 的任何祖先 (a) 是否具有给定名称的条件。

这假设只有一个父级具有提供的名称，我们可以添加额外的逻辑来适应这种情况。 Here 是上述结果：

【讨论】：