可缩放树形图 d3.v4

Question

我已经扩展了 here 的可缩放树形图实现，但在尝试更新它以与 d3 v4 一起使用时遇到了一些问题。我的层次结构作为 json 对象的 CSV 读入。每个对象都是具有各自大学和系的课程。

var data = d3.nest().key(function(d) { return d.university; }).key(function(d) { return d.department; }).entries(res);

var treemap = d3.treemap()
      .children(function(d, depth) { return depth ? null : d._children; })
      .sort(function(a, b) { return a.value - b.value; })
      .ratio(height / width * 0.5 * (1 + Math.sqrt(5)))
      .round(false);

但是 v4 树图对象没有 children() 或 sort() 函数。其他 sources 建议 sum() 和 sort() 应该在节点本身上执行，但我无法将其与 d3 的其他更改相协调。

谁能告诉我如何将我的数据放入树状图布局中？

Answer 1

几天后，我终于弄明白了。父子关系需要通过 d3.stratify.parentId() 明确定义。

这是一个通用的解决方案。假设分层数据包含嵌套在系中的课程，这些系嵌套在嵌套在根中的大学中。数据应具有以下形式...

var data = [ {"object_type": "root" , "key":"Curriculum1", "value" : 0.0} , 
{"object_type": "university" , "key": "univ1", "value" : 0.0, 
    curriculum: "Curriculum1" } , 
{"object_type": "department" , "key": "Mathematics", "value": 0.0, "university": "univ1" , 
    curriculum: "Curriculum1"} ,
{"object_type": "course" , "key": "Linear Algebra", "value": 4.0, 
    "department": "Mathematics", "university": "univ1", curriculum: "Curriculum1"} , 
... ]

请注意，只有叶子（课程）有值（可以解释为学分）。中间节点在原始数据中没有内在价值。要生成根并将其传递给树形图布局，代码如下所示...

  var root = d3.stratify()
    .id( (d) => d.key )
    .parentId( function(d){
      if(d.object_type=='root'){
        return null;
      } else if(d.object_type=='university') {
        return d.curriculum;
      }else if(d.object_type=='department') {
        return d.university;
      } else {
        return d.department;
      }
    })
    (data)
    .sum(function(d) { return d.value; })
    .sort(function(a, b) { return a.value - b.value; });

  treemap(root);