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

Question

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

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

   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

Answer 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 更新 fiddle.

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

  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) 是否具有给定名称的条件。

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

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

d3.js tree - Set depth for specified child nodes?

javascript

jquery

d3.js