Zoomable Treemap d3.v4 [英] Zoomable Treemap d3.v4

问题描述

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

I've extended the zoomable treemap implementation found here , but have hit some issues when trying to update it to work with d3 v4. My hierarchy is read in as a CSV of json objects. Each object is a course with a respective university and department.

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的其他更改相协调。

But the v4 treemap object does not have children() or sort() functions. Other sources suggest that sum() and sort() should be performed on the nodes themselves, but I can't reconcile this with the other changes to d3.

有人可以告诉我如何将我的数据放入树形图布局中吗？

Can someone please show me how to put my data in the treemap layout?

推荐答案

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

After a few days, I've finally figured it out. The parent-child relationships need to be explicitly defined via d3.stratify.parentId().

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

Here's a general solution. Let's assume the hierarchical data consists of courses which are nested in departments which are nested in universities which are nested in the root. The data should have the form...

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

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

Note that only the leaves (courses) have values (can be interpreted as credit hours). Intermediate nodes don't have an inherent value in the raw data. To generate the root and pass it to the treemap layout, the code looks like...

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

这篇关于Zoomable Treemap d3.v4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！