D3.js嵌套功能，无法将数据放入层次结构答案

【问题标题】：D3.js nest function, cannot get data into hierarchyD3.js嵌套功能，无法将数据放入层次结构
【发布时间】：2018-12-08 19:37:32
【问题描述】：

所以我正在尝试创建 d3.js 树。我的数据必须是分层形式才能传递给 d3.treeLayout。

此时我的 json 数组是什么样子的

var data = [
      {"group":"1","price":"36599.88", "cy":"44260"},
      {"group":"2","price":"36599.88", "cy":"44260"},
      {"group":"3","price":"36599.88", "cy":"44260"},
      {"group":"4","price":"36599.88", "cy":"44260"},
      {"group":"1","price":"1241.88", "cy":"44260"},
      {"group":"2","price":"36595429.88", "cy":"44260"},
      {"group":"3","price":"12124.88", "cy":"44260"},
      {"group":"4","price":"6264.88", "cy":"44260"},
    ]

我使用 d3.nest() 函数必须对条目进行分组

var NestedBudget = d3.nest()
                    .key(function(d){
                        return d.group;
                    })
                    .entries(data);

但是，当我进一步将其传递给 d3.hierarchy() 时，此数据不起作用。

我附上了我传递给var root_data = d3.hierarchy(data);后收到的结果图片

我希望我没有让任何人感到困惑。任何帮助将不胜感激

【问题讨论】：

标签： javascript json d3.js

【解决方案1】：

记住你想要一棵树。一棵树需要有一个根元素，每个节点需要两件事：一个唯一的 id，以及一个链接到其父 id 的字段。

例如，使用您拥有的数据，通过添加一个 id 字段并假设“组”代表父节点，您可以将平面数据转换为分层数据：

var data = [
      {"id":"0", "group":null, "price":"36599.88", "cy":"44260"},
      {"id":"1", "group":"0", "price":"36599.88", "cy":"44260"},
      {"id":"2", "group":"0","price":"36599.88", "cy":"44260"},
      {"id":"3", "group":"0","price":"36599.88", "cy":"44260"},
      {"id":"4", "group":"0","price":"36599.88", "cy":"44260"},
      {"id":"5", "group":"1","price":"1241.88", "cy":"44260"},
      {"id":"6", "group":"2","price":"36595429.88", "cy":"44260"},
      {"id":"7", "group":"3","price":"12124.88", "cy":"44260"},
      {"id":"8", "group":"4","price":"6264.88", "cy":"44260"},
    ];
    
const tree = d3
      .stratify()
      .id(d => d.id)
      .parentId(d => d.group)(data);
      
console.log(tree);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"&gt;&lt;/script&gt;

请注意，带有"group":null 的节点是根节点（根据定义，根节点是树的起始节点，因此它没有任何父节点）。

【讨论】：

太棒了！我现在明白为什么它不起作用了。我还有一个问题，因为我从后端休息框架获取数据，我无法将组更改为 null，d3 是否提供了可以分配根节点的东西？
好问题。 "group":null 不是强制性的，我写它是为了让它更容易理解。如果不添加group 键，stratify 方法将无法找到此节点的父节点，这很好，因为它是根节点。所以你可以省略根节点的组键。请在已解决的线程上打勾，答案满足您的需求:)
好吧，我的问题是如何添加父根？你知道我能读到什么参考资料吗？
抱歉，我明白了。你为什么不自己编辑你的数据来添加一个根节点呢？在定义 const tree =... 变量之前类似于 data = [{"id":"0", "group":null}, ...data]; ？
我愿意，但数据每次都会变化。我正在使用 AJAX 并从后端 REST 接收我的数据。所以数据每次都会改变

【解决方案2】：

好的，皮埃尔·卡波说的是对的。我添加了 var packableData = {id:"parent", values:data};

到我收到的数据，当你将它传递给 d3.hierarchy() 时，它将在层次结构中设置父级

【讨论】：