2

I am trying to figure out how to animate a pie chart part from 0 to 100. I can't even draw an arc that has more than 180 degrees. If I try to animate from a 1 degree angle to a 90 degree angle, instead of having a nice transition I'm getting a shape morph.

I'm trying to draw parts of the pie chart with paths like this:

M 100 100 l 0 -50 a 50 50 0 0 0 -20 10 z

My first challenge is calculating the last two numbers, the end point of the arc, and the second challenge is writing an animation that goes from a 1 deg angle to a 360 deg angle.

Any help would be greatly appreciated!

Vlad Nicula
  • 3,577
  • 6
  • 32
  • 50
  • Have you thought about using graphael or d3.js at all, as I would think they have a lot of work done for you ? – Ian Jan 31 '14 at 13:39
  • I am not trying to chart data. I'm trying to achieve a animation effect, however I will be using snap.svg to implement this, so, yeah, I tried using a helper framework for this. I need to know the basics first. – Vlad Nicula Jan 31 '14 at 14:07

1 Answers1

4

Its worth reading this answer on SO which has info on the dasharray effect which can be useful. That doesn't directly answer the pie question, but may give some ideas. A lot will depend on specifically how you want it animated, to whether these would work for you.

So you could draw a full circle with a string like "M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0" which draws 2 arcs.

You could also just do it with a circle. So here's a few bits, and a Snap example alongside it, as you will be using that, and its useful to compare...

<svg width="600" height="425">
    <path d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0" fill="none" stroke="black" stroke-width="150" stroke-dasharray="0 600 600 0" stroke-dashoffset="1000">
        <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="600" dur="2s" repeatCount="1" fill="freeze"/> 
    </path>
    <circle cx="150" cy="350" r="80" fill="none" stroke="red" stroke-width="161" stroke-dasharray="0 600 600 0" stroke-dashoffset="1000" >
        <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="600" dur="2s" repeatCount="1" fill="freeze">
        </animate>
    </circle>
</svg>

same last bit with Snap.js

var s = Snap(600,600);

var c = s.circle(150, 150, 80).attr({
    fill: "none",
    stroke: 'red',
    strokeWidth: 161,
    strokeDasharray: "0 600 600 0",
    strokeDashoffset: 1000
});

Snap.animate(0,600, function( value ){ 
       c.attr({ 'strokeDashoffset': value })
},5000 );

Here is a jsfiddle with them all on

Community
  • 1
  • 1
Ian
  • 13,724
  • 4
  • 52
  • 75
  • this is a very good example. I'll take a look at strokeDasharray and see what I can do with it. In the meanwhile, I came up with an alternate solution : http://jsfiddle.net/agilius/KeLH4/ – Vlad Nicula Jan 31 '14 at 15:43
  • Is this the best way to do something like http://jsfiddle.net/frank_o/gFnw9/19/ as well? I think my fiddle there is way more complicated than it has to be and I'm having a real hard time controlling the total duration of the animation. – Mark Boulder Jul 08 '14 at 19:58
  • If you're having common problems with timing, it could be worth taking a look at a library like Raphael or Snap. I don't think there's one case fits all, and some depends on the complexity of the SVG as to the correct solution. – Ian Jul 09 '14 at 07:07
  • Please see http://stackoverflow.com/questions/24687344/animating-svg-pie-chart-from-0-to-100-in-pure-smil – Mark Boulder Jul 10 '14 at 22:34