-
-
Save enjalot/1203641 to your computer and use it in GitHub Desktop.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-type" content="text/html; charset=utf-8"> | |
| <title>Testing Pie Chart</title> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.29.1"></script> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.29.1"></script> | |
| <style type="text/css"> | |
| text { | |
| font-size: 12pt; | |
| font-family: Arial; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| var w = 640, | |
| h = 480, | |
| r = 100, | |
| color = d3.scale.category20c(); | |
| data = [{"label":"one", "value":20}, {"label":"two", "value":50}, {"label":"three", "value":30}] | |
| var vis = d3.select("body") | |
| .append("svg:svg") | |
| .data([data]) | |
| .attr("width", w) | |
| .attr("height", h) | |
| .append("svg:g") | |
| .attr("transform", "translate(" + r + "," + r + ")") | |
| var arc = d3.svg.arc() | |
| .outerRadius(r); | |
| var pie = d3.layout.pie() | |
| .value(function(d) { return d.value; }); | |
| var arcs = vis.selectAll("g.slice") | |
| .data(pie) | |
| .enter() | |
| .append("svg:g") | |
| .attr("class", "slice"); | |
| arcs.append("svg:path") | |
| .attr("fill", function(d, i) { return color(i); } ) | |
| .attr("d", arc); | |
| arcs.append("svg:text") | |
| .attr("transform", function(d) { | |
| //we have to make sure to set these before calling arc.centroid | |
| d.innerRadius = 0; | |
| d.outerRadius = r; | |
| return "translate(" + arc.centroid(d) + ")"; | |
| }) | |
| .attr("text-anchor", "middle") | |
| .text(function(d, i) { return data[i].label; }); | |
| </script> | |
| </body> | |
| </html> |
Thanks makc !
How can you dynamically update the chart in this example? Updating charts is pretty straightforward if it's a basic dataset like [100,200,300], but in this case, since the dataset is more complex, I'm not sure how to update it.
@Jakobud you're gonna want to use a 'key' function: http://bost.ocks.org/mike/constancy/
Hello, is there a way to put the label on multiple lines if it's quite long?
what's that vis stands for?
excellent, thanks!
@kaanozcan vis stands for visual which is short for visualization
Great stuff, thanks OP!
@frostyfrog funny to see you here.
I modified this code a bit, and I'm getting an odd bug that maybe someone can help me out with?
I basically created a new "data" array that has 12 values (instead of the 3 that are in this example), and now the values are being switched around on the pie chart...0 becomes 6, 1 becomes 0, and 6 becomes 1.
Anybody got any ideas on why this would happen?
PS...when I make the array 10 or fewer elements, this value switching doesn't happen at all...
Should there be a semi-colon after .attr("transform", "translate(" + r + "," + r + ")")?
how can i add more slices?
and here is a fork to display the value in the slice: https://gist.github.com/MohamedAlaa/246b7d45e20be8680394
Is there a way to customize the text that shows up in the label? color, font-size, etc?
I was able to answer my own question. Some styles, like font-size you can adjust in the CSS. You can also add the border between the slices with CSS by using stroke (in Less for simplicity):
.slice {
path {
stroke:#fff;
stroke-width:0.5;
}
text {
font-size:0.9em;
}
}
But for the text color, you need to add another attribute called "fill" to the arcs as such:
.attr("fill", "white")
"simple" example? I think not
@stevematdavies The resulting pie chart is quite simple.
How can I get the data from a Backbone model?
Question: why do you have to put [data] in the extra level of array when creating the outer svg element? The code doesn't work if you just pass data to the data() function:
.data(data) // fails
but
.data([data]) // works
I really don't understand this.
How do i assign the code to a function so i can just call it on a different data set later
@bethrobson The current selection only contains 1 element, the svg tag. You want to attach the whole of data so it will be passed on to the child tags of svg. You do this by creating an array with 1 element and bind that to the selection. If you do .data(data) you only bind the first data-point to the svg.
An alternative is not to bind anything to the svg
var vis = d3.select("body")
.append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(" + r + "," + r + ")");
and add the data to the call to pie
var arcs = vis.selectAll("g.slice")
.data(pie(data))
.enter()
.append("svg:g")
.attr("class", "slice");
tried running it on jsfiddle - dropping the link here for readers convenience :)