D3 V4 TreeMapエラー "不明なエラー：行方不明：Comedy-Musical

Question

V4では、d3.layout.treemapは使用されなくなったため、stratify APIを使用してフラットな配列のオブジェクトでツリーマップを構築しようとしています。私は、オブジェクトhereの平らな配列を使用して実装を見つけた

ここで私は、現在でツリーマップを構築しようとしているコードでこのデータを使用して

var treeData = d3.stratify() 
    .id(function(d) { return d[relationMap.label]; }) 
    .parentId(function(d) { return d[relationMap.series]; }) 
    (chart.children); 

// assign the name to each node 
treeData.each(function(d) { 
    d.name = d[relationMap.label]; 
}); 

var treemap = d3.treemap() 
    .size([container.width, container.height]); 

treemap(root); 

svg.append("g").attr("class", "treemap"); 

var node = svg.select(".treemap") 
    .selectAll("g") 
    .data(root.leaves()) 
    .enter().append('g') 
    .attr('transform', function (d) { 
     return 'translate(0,0)'; 
    }); 

node.append('rect') 
    // .call(position) 
    .attr("x", function (d) { 
     return d.x0 + "px"; 
    }) 
    .attr("y", function (d) { 
     return d.y0 + "px"; 
    }) 
    .attr("width", function (d) { 
     return d.x1 - d.x0 + "px"; 
    }) 
    .attr("height", function (d) { 
     return d.y1 - d.y0 + "px"; 
    }) 
    .attr("fill", function (d, i) { 
     return getColors(colors, i, d[relationMap.series]); 
    }) 
    .attr("fill-opacity", .8) 
    .attr("stroke", "#FFFFFF") 
    .attr("stroke-width", "1"); 

node.append('text') 
    // .call(position) 
    .attr("x", function (d) { 
     return d.x0 + "px"; 
    }) 
    .attr("y", function (d) { 
     return d.y0 + "px"; 
    }) 
    .attr("width", function (d) { 
     return d.x1 - d.x0 + "px"; 
    }) 
    .attr("height", function (d) { 
     return d.y1 - d.y0 + "px"; 
    }) 
    .attr("transform", "translate(3, 13)") 
    .text(function (d) { 
     if (d.dy !== 0) { 
      return d.children ? null : d[relationMap.label]; 
     } 
    }); 


/* Don't display text if text is wider than rect */ 
var temp = svg.select(".treemap").selectAll("g").selectAll("text"); 
temp.attr("style", function (d) { 
    if (this.getBBox().width >= (d.x1 - 2)) { 
     return "display:none"; 
    } 
    if (this.getBBox().height >= (d.y1 - 2)) { 
     return "display:none"; 
    } 
    }); 

：。。

[ 
{ 
    "Title": "The Wrestler", 
    "MovieBudget": 6000000, 
    "Genre": "Drama" 
}, 
{ 
    "Title": "The Curious Case of Benjamin Button", 
    "MovieBudget": 150000000, 
    "Genre": "Drama" 
}, 
{ 
    "Title": "An Education", 
    "MovieBudget": 7500000, 
    "Genre": "Drama" 
}, 
{ 
    "Title": "The Tale of Despereaux", 
    "MovieBudget": 60000000, 
    "Genre": "Family - Animation" 
}, 
{ 
    "Title": "A Simple Plan", 
    "MovieBudget": 30000000, 
    "Genre": "Drama" 
}, 
{ 
    "Title": "Le Divorce", 
    "MovieBudget": 0, 
    "Genre": "Comedy - Musical" 
}, 
{ 
    "Title": "The Man With the Iron Fists", 
    "MovieBudget": 15000000, 
    "Genre": "Action - Adventure" 
}, 
{ 
    "Title": "Watchmen", 
    "MovieBudget": 130000000, 
    "Genre": "Action - Adventure" 
}, 
{ 
    "Title": "Lords of Dogtown", 
    "MovieBudget": 25000000, 
    "Genre": "Drama" 
}, 
{ 
    "Title": "Becoming Jane", 
    "MovieBudget": 16500000, 
    "Genre": "Drama" 
}, 
{ 
    "Title": "As Good as It Gets", 
    "MovieBudget": 50000000, 
    "Genre": "Comedy - Musical" 
} 
] 

私はこのエラーになっています：

"d3.v4.min.js:4 Uncaught Error: missing: Drama"

をそして私はこれを修正するために何をすべきかわかりません。私はオンラインで調査したが、このエラーと似ているものは何も見つかりませんでした。私は描画セクションに行ってきましたが、それは今までに1つのノードを描いただけで、画面全体を占めました。私は約2日間それをしてきたし、いくつかの助けを使用することができます。どんな提案も役立ちます！

注釈として。ツリー内に配置されたデータを使いやすくするには、それを行う方法もあります。 d3.v4.js

私はしばらくの間、同じ問題で立ち往生したために

Answer 1

。

follwingスレッド

が私のために問題を絞り込む： https://github.com/d3/d3-hierarchy/issues/33

基本的に私はそれを理解して、あなたがd3.stratify実装するデータセット内の指定した親ノードを持っている必要があります（）。

参照したブロックでは、フラット構造になっているデータには、レベルごとに親ノードが指定されています。あなたのデータはそうではありません。

親ノード&を自分で指定する必要があります。これはd3.nest（）で行うことができます。

このブロックhttp://bl.ocks.org/mbostock/2838bf53e0e65f369f476afd653663a2 は、私のソリューションに私を導いたので、あなたの状況に適用する必要があります。要約すると

は、私が使用：

var nest = d3.nest() // allows elements in an array to be grouped into a hierarchical tree structure 
     .key() // levels in the tree are specified by key functions. can have multiple keys 
     .rollup() // Specifies a rollup function to be applied on each group of leaf elements. The return value of the rollup function will replace the array of leaf values in either the associative array returned by nest.map or nest.object; for nest.entries, it replaces the leaf entry.values with entry.value. 

（コメントソース：https://github.com/d3/d3-collection）

var root = d3.hierarchy({data:nest.entries(csv_data)},function(d){return d.data;}) 
    .sum(function(d) {return d.value; }) 

treemap(root) 

を私はこれが役に立てば幸い!!!!