How to insert pie charts into a Pack layout in d3.js?
Hello everyone, not simple circles, I want to add pie charts to the package layout.
Let's say this is my pie chart data and pie layout
var data=[2,3,4,5]
var arc = d3.svg.arc () .outerRadius (50) .innerRadius (0);
var pie = d3.layout.pie () .sort (null)
.value(function(d) { return d; });
And this is how the packet goes around the circle
var circle = svg.selectAll("circle")
.data(nodes1)
.enter().append("circle")
.attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
.style("fill", function(d) { return d.children ? color(d.depth) : null; })
.on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); });
Can someone explain to me how, instead of adding circles in the package layout, I could add paths and make pie charts out of it ?! [enter image description here] [1]
source to share
Instead of directly using the results of bundling the packages, you can use the value r
inferred from the package layout to define outerRadius
your generator arc
. Then instead of adding svg elements to the diagram, circle
you can add svg elements g
and add each of the arcs inside:
Full example: http://bl.ocks.org/jsl6906/4a1b818b64847fb05d56
Relevant code:
var bubble = d3.layout.pack()
.value(function(d) { return d3.sum(d[1]); })
.sort(null)
.size([diameter, diameter])
.padding(1.5),
arc = d3.svg.arc().innerRadius(0),
pie = d3.layout.pie();
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.attr("class", "bubble");
var nodes = svg.selectAll("g.node")
.data(bubble.nodes({children: data}).filter(function(d) { return !d.children; }));
nodes.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
var arcGs = nodes.selectAll("g.arc")
.data(function(d) {
return pie(d[1]).map(function(m) { m.r = d.r; return m; });
});
var arcEnter = arcGs.enter().append("g").attr("class", "arc");
arcEnter.append("path")
.attr("d", function(d) {
arc.outerRadius(d.r);
return arc(d);
})
.style("fill", function(d, i) { return color(i); });
source to share