javascript - D3.js嵌套函数，无法将数据放入层次结构中

Question

所以我正在尝试创建 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); 后收到的结果的图片

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

Answer 1

请记住，您想要一棵树。一棵树需要有一个根元素，每个节点需要两个东西:一个唯一的 id 和一个链接到其父节点 id 的字段。

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

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);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

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