Zoomable Treemap d3.v4

Question

Я расширил реализацию масштабируемого treemap, найденную here, но затронул некоторые проблемы при попытке обновить его для работы с d3 v4. Моя иерархия читается как CSV объектов json. Каждый объект - это курс с соответствующим университетом и отделом.

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

Но объект treemap v4 не имеет дочерних() или sort() функций. Другие sources предполагают, что sum() и sort() должны выполняться самими узлами, но я не могу смириться с другими изменениями в d3.

Может кто-нибудь, пожалуйста, покажите мне, как поместить мои данные в схему treemap?

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

Обратите внимание, что только листья (курсы) имеют значения (можно интерпретировать как кредитных часов). Промежуточные узлы не имеют неотъемлемого значения в необработанных данных. Чтобы сгенерировать корень и передать его на макет карты 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);