Open nhulz opened 7 years ago
Hmm yeah, his new pack layout is a little tricky. Give this a try (your arch-nemesis d3.nest
makes an appearance):
var radius = 3;
function dotChartfunction(key){
var pack = d3.pack()
.size([200, 100])
.radius(function(){ return radius; })
.padding(1);
var groupedData = d3.nest()
.key(function(d) {
return d[key] + d.firstSeparateBed;
})
.entries(dotChartData);
var packedData = [];
groupedData.forEach(function(d) {
// nests the data for the pack layout
var root = d3.hierarchy(d, function(l) { return l.values; })
.sum(function(l) { return 1; });
packedData = packedData.concat(pack(root).children);
});
var circles = dotChartSVG.selectAll("circle").data(packedData);
function circlePosition(circle) {
circle
.attr("cy", function(d){
return yScale(d.data[key]) + d.y - 50;
})
.attr("cx", function(d){
return xScale(d.data.firstSeparateBed) + d.x - 100;
});
}
// enter animation for the first time this function is run
circles.enter().append("circle")
.call(circlePosition)
.attr("r", 0)
.transition().duration(1000)
.attr("r", radius);
// update the x and y coordinates when running this function after the first time
circles
.transition().duration(1000)
.call(circlePosition);
}
I'll be online tomorrow morning if you have any more questions before Tuesday (but I tested this on my computer and man does it look sexy).
Holy crap this looks so cool. Thanks Dave!
Unfortunately I've had little to no luck finding any tutorials on data packing with the D3 V4 so this has been challenging.
From what I've gathered, d3.pack() is the new function, and I need to give it a "root node" in order for it to work. So I've been trying to figure out what function I use now to format the data so that d3.pack() can use it. The closest I've got to this is the d3.heirarchy() function, but I'm still uncertain about what exactly it's doing or how to then use that data in the draw function.