In the latest version, V4, the d3.layout.treemap is no longer used. Therefore, I am currently attempting to create a treemap with a flat array of objects using the stratify API. An implementation utilizing a flat array of objects can be found here.
Below is the code snippet I am using to build the treemap:
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";
}
});
Utilizing this data as an example:
[
{
"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"
}
]
An error message is appearing:
"d3.v4.min.js:4 Uncaught Error: missing: Drama"
I'm facing difficulty in resolving this error. Extensive online research has not provided any solutions similar to this issue. The drawing section only displays one node that occupies the entire screen. I have been troubleshooting for approximately two days and would greatly appreciate any suggestions or assistance!
Additionally, if restructuring the data into a tree format simplifies the process, I have the capability to do so.