Javascript 如果我更改子项，则树不会扩展'；数据中的属性名

我在一个简单的树上工作，在那里我改变了数据中的命名约定。但这棵树不再向上扩展了

这是我的小提琴：

我使用的数据如下：

{
  "data" :
  {
    "major" : "Grand Pa",
    "minor" : [
      {
        "major": "Pa",
        "minor": [
          {
          "major":"son"
        }
        ]
      },
      {
        "major": "afa",
        "minor":[
          {
            "major":"blah"
          }
        ]
      }
    ]
  }
}

---

树生成器希望看到名为

子对象的对象属性。根据报告：

如果未指定子对象，则返回当前子对象访问器函数，默认情况下，该函数假定输入数据是具有子数组的对象：

function children(d) {
      return d.children;
}

因此，您必须告诉树生成器您有
minor
，而不是
children
：

var tree = d3.layout.tree()
    .size([height, width])
    .children(function(d){ 
        return d.minor; 
    });

这是你最新的小提琴：

这里是一个堆栈片段：


var flare={
“数据”：
{
“少校”：“大Pa”，
“小调”：[
{
“少校”：“Pa”，
“小调”：[
{
“少校”：“儿子”
}
]
},
{
“少校”：“afa”，
“小调”：[
{
“少校”：“废话”
}
]
}
]
}
};
var margin={顶部：20，右侧：120，底部：20，左侧：120}，
宽度=960-margin.right-margin.left，
高度=800-margin.top-margin.bottom；
var i=0，
持续时间=750，
根；
var tree=d3.layout.tree（）
.尺寸（[高度、宽度]）
.儿童（功能（d）{返回d.minor}）；
var diagonal=d3.svg.diagonal（）
.投影（函数（d）{返回[d.y，d.x]；}）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。右侧+边距。左侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
root=flare.data；
root.x0=高度/2；
root.y0=0；
功能崩溃（d）{
if（d.小修）{
d、 _小调=d小调；
d、 _小调forEach（坍塌）；
d、 次要=零；
}
}
根。小叶。叶根（塌陷）；
更新（根）；
d3.选择（self.frameElement）.style（“高度”，“800px”）；
函数更新（源）{
//计算新的树布局。
var nodes=tree.nodes（root）.reverse（），
链接=树。链接（节点）；
//为固定深度进行规格化。
forEach（函数（d）{d.y=d.depth*180；}）；
//更新节点…
var node=svg.selectAll（“g.node”）
.data（节点，函数（d）{返回d.id | |（d.id=++i）}）；
//在父节点的上一个位置输入任何新节点。
var nodeEnter=node.enter（）.append（“g”）
.attr（“类”、“节点”）
.attr（“transform”，函数（d）{return“translate”（“+source.y0+”，“+source.x0+”））；}）
。开启（“点击”，点击）；
nodeEnter.append（“圆”）
.attr（“r”，1e-6）
.style（“fill”，函数（d）{return d._minor？“lightsteelblue”：“fff”}）；
nodeEnter.append（“文本”）
.attr（“x”，函数（d）{返回d.minor | | d._minor？-10:10；}）
.attr（“dy”，“.35em”）
.attr（“文本锚定”，函数（d）{返回d.minor | | d.| u minor？“结束”：“开始”}）
.text（函数（d）{返回d.major；}）
.样式（“填充不透明度”，1e-6）；
//将节点转换到其新位置。
var nodeUpdate=node.transition（）
.持续时间（持续时间）
.attr（“转换”，函数（d）{return“translate”（+d.y+），“+d.x+”）；}）；
节点更新。选择（“圆圈”）
.attr（“r”，4.5）
.style（“fill”，函数（d）{return d._minor？“lightsteelblue”：“fff”}）；
nodeUpdate.select（“文本”）
.样式（“填充不透明度”，1）；
//将退出节点转换到父节点的新位置。
var nodeExit=node.exit（）.transition（）
.持续时间（持续时间）
.attr（“transform”，函数（d）{return“translate”（“+source.y+”，“+source.x+”）”）；}）
.remove（）；
nodeExit.select（“圆”）
.attr（“r”，1e-6）；
nodeExit.select（“文本”）
.样式（“填充不透明度”，1e-6）；
//更新链接…
var link=svg.selectAll（“path.link”）
.data（链接，函数（d）{返回d.target.id；}）；
//在父对象的上一个位置输入任何新链接。
link.enter（）插入（“路径”，“g”）
.attr（“类”、“链接”）
.attr（“d”，函数（d）{
var o={x:source.x0，y:source.y0}；
返回对角线（{source:o，target:o}）；
});
//过渡链接到他们的新位置。
link.transition（）
.持续时间（持续时间）
.attr（“d”，对角线）；
//将退出节点转换到父节点的新位置。
link.exit（）.transition（）
.持续时间（持续时间）
.attr（“d”，函数（d）{
var o={x:source.x，y:source.y}；
返回对角线（{source:o，target:o}）；
})
.remove（）；
//将旧位置隐藏起来，以便过渡。
nodes.forEach（函数（d）{
d、 x0=d.x；
d、 y0=d.y；
});
}
//点击切换小调。
功能点击（d）{
if（d.小修）{
d、 _小调=d小调；
d、 次要=零；
}否则{
d、 小调=d.\U小调；
d、 _minor=null；
}
更新（d）；
}

。节点圆{
填充：#fff；
笔画：钢蓝；
笔画宽度：3px；
}
.node文本{font:12px无衬线；}
.链接{
填充：无；
冲程：#ccc；
笔画宽度：2px；
}
树生成器希望看到名为
子对象的对象属性。根据报告：

如果未指定子对象，则返回当前子对象访问器函数，默认情况下，该函数假定输入数据是具有子数组的对象：

function children(d) {
      return d.children;
}

因此，您必须告诉树生成器您有
minor
，而不是
children
：

var tree = d3.layout.tree()
    .size([height, width])
    .children(function(d){ 
        return d.minor; 
    });

这是你最新的小提琴：

这里是一个堆栈片段：


var flare={
“数据”：
{
“少校”：“大Pa”，
“小调”：[
{
“少校”：“Pa”，
“小调”：[
{
“少校”：“儿子”
}
]
},
{
“少校”：“afa”，
“小调”：[
{
“少校”：“废话”
}
]
}
]
}
};
var margin={顶部：20，右侧：120，底部：20，左侧：120}，
宽度=960-margin.right-margin.left，
高度=800-margin.top-margin.bottom；
var i=0，
持续时间=750，
根；
var tree=d3.layout.tree（）
.尺寸（[高度、宽度]）
.儿童（功能（d）{返回d.minor}）；
var diagonal=d3.svg.diagonal（）
.预测（f）