d3.js 以数组为数据结构的树形布局答案

【问题标题】：d3.js tree layout with array as data structured3.js 以数组为数据结构的树形布局
【发布时间】：2013-12-09 10:03:02
【问题描述】：

我想用 d3.js 使用树形布局创建一个图表。而不是带有分层子级的常见flare json结构，例如：

{
    "name":"bla",
    "children":[
      {
         "name":"bla2",
         "someattribute":"green"      
      }
    ]
}

我只有一个数组（代表时间步长的元素）。我总是希望数组的下一个元素是当前的子元素。所以实际上我希望从扁平数组中生成一棵树。我的想法是像这样改变树布局的子函数：

    var tree = d3.layout.tree()
    .children(function(d,i) {
        return data[(i+1)];
    })

但树中只显示一个元素。我不明白。在data[0] 上调用tree.nodes 时不应该遍历每个元素吗？

澄清我的要求：我想将[ele1, ele2, ele3] 之类的数组转换为如下所示的树形图：

ele1-->ele2-->ele3

【问题讨论】：

【解决方案1】：

我看到的真正问题是传递给.children() 的函数需要返回一个子对象数组，而不是现在的单个对象，即

var tree = d3.layout.tree()
.children(function(d,i) {
    return i < data.length - 1; data.slice(i+1, i+2) : null;
})

叶节点（数组中的最后一个数据对象）返回 null 而不是空列表也很重要。

使用这种方法，我创建了一个有效的JSFiddle，它将从一组对象创建一个线性树。

但是，我同意@LarsKotthoff 对您帖子的评论；如果您以分层格式传递 tree.nodes() 对象的根，则您的代码在可维护性和灵活性方面会得到更好的服务。

【讨论】：