javascript - 可缩放 TreeMap d3.v4

Question

我扩展了找到的可缩放 TreeMap 实现 here ，但在尝试更新它以使用 d3 v4 时遇到了一些问题。我的层次结构作为 json 对象的 CSV 文件读入。每个对象都是一门具有相应大学和系的类(class)。

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() 函数。其他 sources建议 sum() 和 sort() 应该在节点本身上执行，但我无法将其与 d3 的其他更改相协调。

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

Answer 1

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

这是一个通用的解决方案。让我们假设分层数据由嵌套在部门中的类(class)组成，这些类(class)嵌套在嵌套在根中的大学中。数据应具有以下形式...

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"} , 
... ]

请注意，只有叶子(类(class))有值(可以解释为学分)。中间节点在原始数据中没有内在值(value)。要生成根并将其传递给 TreeMap 布局，代码如下...

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