D3 V4 TreeMap 오류 "캐치 오류 : 누락 코미디 - 뮤지컬

Question

V3에서는 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) 

을 난이 도움이되기를 바랍니다 !!!!