Zoomable Treemap d3.v4

Question

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

Free P

但是v4 treemap对象没有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);