D3 pie and donut charts
I found this fiddle
http://jsfiddle.net/Qh9X5/1196/
This is basically a donut chart and what I am trying to achieve is a pie chart inside a donut chart:
http://jsfiddle.net/rfcee/q3z88wfx/1/
But somehow it doesn't work out properly. Is it even possible? Thank!
+3
source to share
2 answers
When you do this:
var path2 = svg.selectAll("path")
.data(piedata2)
.enter().append("path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc2);
var path = svg.selectAll("path")
.data(piedata)
.enter().append("path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc);
You bind your data to the same DOM element, the second one .data
overwrites some data in the first one.
A simple fix is to split it into two separate ones g
:
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
var g1 = svg
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var g2 = svg
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var path = g1.selectAll("path")
.data(piedata)
...
var path2 = g2.selectAll("path")
.data(piedata2)
...
Updated fiddle .
+2
source to share
var dataset = {
apples: [53245, 28479, 19697, 24037, 40245],
pear:[53245, 28479]
};
var dataset2 = {
apples:[53245, 28479, 19697, 24037, 40245]
};
var width = 300,
height = 300,
radius = Math.min(width, height) / 2;
var color = d3.scale.category20();
var pie = d3.layout.pie()
.sort(null);
var piedata = pie(dataset.apples);
var piedata2 = pie(dataset2.apples);
var arc = d3.svg.arc()
.innerRadius(radius - 100)
.outerRadius(radius - 50);
var arc2 = d3.svg.arc()
.innerRadius(0)
.outerRadius(radius-110);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var path2 = svg.selectAll("g").append("g").attr("id","pie")
.data(piedata)
.enter().append("path")
.attr("fill", function(d, i) {
return color(i);
})
.attr("d", arc2);
var path = svg.selectAll("g").append("g").attr("id","donut")
.data(piedata2)
.enter().append("path")
.attr("fill", function(d, i) {
return color(i);
})
.attr("d", arc);
svg.selectAll("text").data(piedata)
.enter()
.append("text")
.attr("text-anchor", "middle")
.attr("x", function(d) {
var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2;
d.cx = Math.cos(a) * (radius - 75);
return d.x = Math.cos(a) * (radius - 20);
})
.attr("y", function(d) {
var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2;
d.cy = Math.sin(a) * (radius - 75);
return d.y = Math.sin(a) * (radius - 20);
})
.text(function(d) { return d.value; })
.each(function(d) {
var bbox = this.getBBox();
d.sx = d.x - bbox.width/2 - 2;
d.ox = d.x + bbox.width/2 + 2;
d.sy = d.oy = d.y + 5;
});
svg.append("defs").append("marker")
.attr("id", "circ")
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("refX", 1)
.attr("refY", 1)
.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 0);
svg.selectAll("path.pointer").data(piedata).enter()
.append("path")
.attr("class", "pointer")
.style("fill", "none")
.style("stroke", "black")
.attr("marker-end", "url(#circ)")
.attr("d", function(d) {
if(d.cx > d.ox) {
return "M" + d.sx + "," + d.sy + "L" + d.ox + "," + d.oy + " " + d.cx + "," + d.cy;
} else {
return "M" + d.ox + "," + d.oy + "L" + d.sx + "," + d.sy + " " + d.cx + "," + d.cy;
}
});
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 960px;
}
text {
font: 10px sans-serif;
}
form {
position: absolute;
right: 10px;
top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
I think you are looking for this ....
+1
source to share