Zoomable Treemap d3.v4

Question

hereというズーム可能なツリーマップの実装を拡張しましたが、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のツリーマップオブジェクトは、ソート子供（）または（）関数を持っていません。他のsourcesは、ノード自体に対して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);