Databases
StackOverflow2013
Postsdbo
POD3 Pie Graph Text/Animation
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POD3 Pie Graph Text/Animation
    text
    copied!<p>I currently have a pie graph built in D3.js that looks like this, but with different data</p> <p><a href="http://jsfiddle.net/bnKgd/" rel="nofollow">http://jsfiddle.net/bnKgd/</a></p> <p>The data is loaded externally with JSON. Here is my code</p> <pre><code>(function() { var w = 670, h = 326, r = 150, inner = 80, color = d3.scale.category20c(); d3.json("script.php", function (data) { var vis = d3.select("#pieGraph") .append("svg:svg") .data([data]) .attr("width", w) .attr("height", h) .append("svg:g") .attr("transform", "translate(" + r + "," + r + ")") var arc = d3.svg.arc() .innerRadius(inner) .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) }) })(); </code></pre> <p>With my data, some of the slices are too small to hold text. I am trying to find options for displaying the information, when I came across this:</p> <p><a href="http://jsbin.com/ukaxod/144/embed?javascript,live" rel="nofollow">http://jsbin.com/ukaxod/144/embed?javascript,live</a></p> <p>How can I mimic these animations? I'd like to know how to add the text/value in the center when the user hovers over the slice. I'd also like to know how to add the arc, and the resize animation. I haven't found any similar examples anywhere, so some help would be great. </p> <p>Thanks!</p> <p>EDIT: Here is some progress that I made. Add "/1/" to the end of the JSFiddle URL, since I don't have a high enough reputation</p> <p>I'm still looking for a way to display the text in the center, and the arc animation</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload