Zoomable Treemap D3.v4

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 object

Solution 1:

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...

vardata = [ {"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'){
        returnnull;
      } elseif(d.object_type=='university') {
        return d.curriculum;
      }elseif(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);