Zoomable Treemap d3.v4

Question

我已经扩展了这里的zoomable treemap实现,但在尝试更新它以使用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 treemap对象没有children()或sort()函数.其他来源建议应该在节点本身上执行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);