Is path animation possible with SVG.js - javascript

There are many examples of SVG path animation, both natively
http://jsfiddle.net/FVqDq/
and with Raphael.js
http://jsfiddle.net/d7d3Z/1/
p.animate({path:"M140 100 L190 60"}, 2000, function() {
r.animate({path:"M190 60 L 210 90"}, 2000);
});
How is this possible with the svg.js library?


No, this is not yet possible with svg.js. I have been looking into it and it will be a rather large implementation. As I try to keep the library small it will never be part of the library itself, but I might write a plugin. Although at the moment I do not have much time on my hands so all help will be appreciated.
UPDATE:
This is now possible with SVG.js out of the box if you use paths with equal commands but different values.
But we also have a path morphing plugin for SVG.js which is probably the thing you are looking for.


There is a quick and dirty way to animate a line with svg.js:
http://jsfiddle.net/c4FSF/1/
draw
.line(0, 0, 0, 0)
.stroke({color: '#000', width: 2})
.animate(1000, SVG.easing.bounce) // Using svg.easing.js plugin(not required)
.during(function(t, morph) {
this.attr({x2:morph(0, 100), y2: morph(0, 100)})
})
Animating complex SVG paths as wout said will require a plugin.
Unfortunately I don't (yet) know enough about SVG, but I'm thinking of writing a plugin which would use the SMIL animation tag. Which is what is used in the first link of the question.


We can make path animation by finding the bounding box of your path and the do like this.
if your path having some clipping -rectangle means like that below
<g id="container_svg_SeriesGroup_0" transform="translate(128.8,435)" clip-path="url(#container_svg_SeriesGroup_0_ClipRect)"><path id="container_svg_John_0" fill="none" stroke-dasharray="5,5" stroke-width="3" stroke="url(#container_svg_John0Gradient)" stroke-linecap="butt" stroke-linejoin="round" d="M 0 -17.25 L 21.7 -112.12499999999999 M 21.7 -112.12499999999999 L 43.4 -51.75 M 43.4 -51.75 L 86.8 -25.875 M 86.8 -25.875 L 108.5 -155.25 "/><defs><clipPath id="container_svg_SeriesGroup_0_ClipRect"><rect id="container_svg_SeriesGroup_0_ClipRect" x="0" y="-155.25" width="118.5" height="148" fill="white" stroke-width="1" stroke="transparent" style="display: inline-block; width: 118.5px;"/></clipPath></defs></g>
var box = $("#"+ path.id")[0].getBBox();
create the rectangle based on the box and the set this rectangle as your clip-path in path.
then increase the width of the rectangle step by step in jquery.animate.
doAnimation: function () {
//cliprect is your clipped rectangle path.
$(clipRect).animate(
{ width: 1000},
{
duration: 2000,
step: function (now, fx) {
$(clipRect).attr("width", now);
}
});
},
jquery.animate step function is used to increase the width of your clip-rect step by step.


You can animate paths using the svg.path.js plugin.
See the first examples (using the .drawAnimated method).


Another option, which we've resorted to, is to use textPath and then use a character.
In our case we're using the • entity, but I'm thinking if you create your own typography in .svg, .woff etc, you can have flat shapes of any kind.
So you would use your character as in here:
http://jsfiddle.net/wbx8J/3/
/* create canvas */
var draw = SVG('canvas').size(400,400).viewbox(0, 0, 1000, 1000)
/* create text */
var text = draw.text(function(add) {
add.tspan('•').dy(27)
})
text.font({ size: 80, family: 'Verdana' })
/* add path to text */
text.path('M 100 400 C 200 300 300 200 400 300 C 500 400 600 500 700 400 C 800 300 900 300 900 300')
/* visualise track */
draw.use(text.track).attr({ fill: 'none'/*, 'stroke-width': 1, stroke: '#f09'*/ })
/* move text to the end of the path */
function up() {
text.textPath.animate(3000).attr('startOffset', '100%').after(down)
}
/* move text to the beginning of the path */
function down() {
text.textPath.animate(3000).attr('startOffset', '0%').after(up)
}
/* start animation */
up()

Related

Basic rotation using Snap.svg

I am trying to rotate the svg as it translates along, but i cant make it rotate on its axis. Is there a way to make it rotate on its own axis ?
jsFiddle
js Code
var paper = Snap('#svg');
matrix = new Snap.Matrix().translate(630, -95);
var start_gear = paper.path("M51.7,29.5v-7.2h-5.2c-0.5-3.1-1.6-6-3.3-8.5l3.4-3.4l-5.1-5.1l-3.2,3.2c-2.6-2-5.6-3.4-8.8-4V0.3h-7.1v4.1 c-3.4,0.5-6.5,1.7-9.2,3.6l-2.8-2.8l-5.1,5.1L8,12.9c-2,2.7-3.3,5.8-3.8,9.2H0v7.1h4.2c0.6,3.4,2,6.6,4,9.2l-2.8,2.8l5.1,5.1 l2.9-2.9c2.6,1.7,5.6,2.9,8.9,3.4v5.3h7.2v-5.4c3.1-0.6,6-1.9,8.5-3.7l3.6,3.6l5.1-5.1l-3.7-3.7c1.7-2.5,2.9-5.3,3.5-8.3H51.7z M25.8,38.1c-6.6,0-12-5.4-12-12c0-6.6,5.4-12,12-12c6.6,0,12,5.4,12,12C37.8,32.8,32.4,38.1,25.8,38.1z").transform(matrix);
start_gear.attr({fill: "#e8434d"});
start_gear.animate({ transform: 't630, 240 r540,22,20' }, 3000, mina.bounce);

If you don't include your own center of rotation, Snap will use its calculated bounding box center to rotate around. So it's as simple as removing that.
start_gear.animate({ transform: 't630, 240 r540' }, 3000, mina.bounce);
jsfiddle
If you only want to rotate, AND the element already has a transform applied to it, you need to include the previous transform, so it doesn't get overwritten. To get the previous transform, it's simply element.transform(). So the full command would be...
start_gear.animate({ transform: start_gear.transform() + 'r540' }, 3000, mina.bounce);
jsfiddle

See this demo, I used TimelineMax.js lib. it is Super easy and helpful in animation !
HTML code :
<svg id="svg" width="80vw" height="60vh" viewBox="0 0 1300 250">
<path class="myPath" d="M51.7,29.5v-7.2h-5.2c-0.5-3.1-1.6-6-3.3-8.5l3.4-3.4l-5.1-5.1l-3.2,3.2c-2.6-2-5.6-3.4-8.8-4V0.3h-7.1v4.1 c-3.4,0.5-6.5,1.7-9.2,3.6l-2.8-2.8l-5.1,5.1L8,12.9c-2,2.7-3.3,5.8-3.8,9.2H0v7.1h4.2c0.6,3.4,2,6.6,4,9.2l-2.8,2.8l5.1,5.1 l2.9-2.9c2.6,1.7,5.6,2.9,8.9,3.4v5.3h7.2v-5.4c3.1-0.6,6-1.9,8.5-3.7l3.6,3.6l5.1-5.1l-3.7-3.7c1.7-2.5,2.9-5.3,3.5-8.3H51.7z M25.8,38.1c-6.6,0-12-5.4-12-12c0-6.6,5.4-12,12-12c6.6,0,12,5.4,12,12C37.8,32.8,32.4,38.1,25.8,38.1z"></path>
JS code:
/*
var paper = Snap('#svg');
matrix = new Snap.Matrix().translate(630, -95);
var start_gear = paper.path("M51.7,29.5v-7.2h-5.2c-0.5-3.1-1.6-6-3.3-8.5l3.4-3.4l-5.1-5.1l-3.2,3.2c-2.6-2-5.6-3.4-8.8-4V0.3h-7.1v4.1 c-3.4,0.5-6.5,1.7-9.2,3.6l-2.8-2.8l-5.1,5.1L8,12.9c-2,2.7-3.3,5.8-3.8,9.2H0v7.1h4.2c0.6,3.4,2,6.6,4,9.2l-2.8,2.8l5.1,5.1 l2.9-2.9c2.6,1.7,5.6,2.9,8.9,3.4v5.3h7.2v-5.4c3.1-0.6,6-1.9,8.5-3.7l3.6,3.6l5.1-5.1l-3.7-3.7c1.7-2.5,2.9-5.3,3.5-8.3H51.7z M25.8,38.1c-6.6,0-12-5.4-12-12c0-6.6,5.4-12,12-12c6.6,0,12,5.4,12,12C37.8,32.8,32.4,38.1,25.8,38.1z").transform(matrix);
start_gear.attr({fill: "#e8434d"});
start_gear.animate({ transform: 't630, 240 r540,22,20' }, 3000, mina.bounce); */
var tl = new TimelineMax();
// Settings ...
tl.set(".myPath", {
x: 630,
y: -95,
fill: "#e8434d",
transformOrigin: "center"
})
// Animatiion ...
tl.to(".myPath", 3 , {
//x : "+= 500",
y: "+= 400",
rotation: "630",
ease: Bounce.easeOut
});

SVG line animation for dynamic text

I'm trying to implement drawing effect for text from user input so that it looks like it's being written.
Very much like the drawing of "there" on this page: http://maxwellito.github.io/vivus/
Where I'm at: https://jsfiddle.net/w3nmwqgo/1/
SO editor is complaining about no code, so here's the same thing:
var path = document.getElementsByTagName('path')[0];
// this doesn't return true length
var length = path.getTotalLength();
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;
var intervalId = setInterval(function() {
if (length < 0) clearInterval(intervalId);
path.style.strokeDashoffset = --length;
}, 25);
/* shouldn't need this? */
path {
transform: translate(20px, 100px);
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path fill="none" stroke="black" d="M-7.34 0.29C-7.34 0.22-2.88-6.77 3.24-14.54C11.38-24.84 18.79-31.82 24.70-34.78C24.77-34.85 34.49-39.60 39.89-35.14C41.26-33.98 41.90-32.62 41.98-30.96C42.41-23.69 34.27-17.28 29.88-11.81C26.35-7.42 24.98-4.32 25.63-2.45C25.99-1.37 27.00-0.65 28.51-0.50C36.22 0.22 45.50-6.34 56.88-15.91C57.17-16.13 57.17-16.56 56.95-16.85C56.74-17.14 56.30-17.14 56.02-16.92C49.10-11.09 44.14-7.42 39.96-5.04C35.42-2.45 31.82-1.44 28.66-1.80C27.14-2.02 27.00-2.66 26.93-2.81C26.64-3.67 26.71-5.76 30.89-11.02C33.26-14.11 35.78-16.63 35.78-16.63C36.58-17.42 43.63-24.62 43.27-31.03C43.20-33.05 42.12-34.92 40.68-36.07C39.24-37.22 37.51-38.02 35.42-38.23C33.84-38.45 32.04-38.30 30.02-37.94C26.78-37.22 24.19-36.00 24.12-35.93C20.74-34.27 16.92-31.32 12.74-27.22C9.43-23.98 5.90-20.02 2.23-15.41C-0.43-12.02-2.74-8.78-4.61-6.19C-0.50-14.76 4.97-23.47 10.22-31.10C14.47-33.91 22.54-39.31 30.67-45.50C40.90-53.35 48.02-59.98 51.98-65.30C52.06-65.45 54.79-69.26 53.14-72.72C52.63-73.73 51.70-74.59 50.62-74.95C49.32-75.38 47.81-75.24 46.15-74.45C44.71-73.73 41.33-70.70 36.94-66.02C32.04-60.91 26.42-54.43 21.24-47.95C16.92-42.55 12.89-37.22 9.29-32.04L8.93-31.54C7.34-29.16 5.76-26.86 4.25-24.55C-1.44-15.62-5.76-7.42-8.50-0.29ZM49.10-73.94C50.62-74.02 51.70-72.94 51.98-72.14C53.28-69.41 50.98-66.17 50.90-66.10C42.84-55.15 22.03-40.54 12.31-33.98C15.98-39.17 19.44-43.70 22.25-47.09C33.84-61.56 44.28-72.14 46.73-73.30C47.81-73.80 48.38-73.94 49.10-73.94ZM59.04-0.94C65.59 2.59 77.26 0 83.74-2.38C91.66-5.62 98.35-9.00 107.78-16.99C108-17.28 108.07-17.64 107.86-17.93C107.57-18.22 107.21-18.22 106.92-18.00C97.78-10.15 91.01-6.70 83.30-3.53C79.20-1.87 66.10 1.58 59.76-2.02C51.62-6.48 57.67-20.02 62.14-24.26C62.78-23.98 63.58-23.62 64.44-23.26C67.68-21.89 72.94-20.16 79.20-19.87C85.32-19.58 93.31-22.03 96.70-27.79C101.16-35.35 93.24-40.90 85.32-39.89C78.77-39.02 71.71-35.50 65.23-29.23C64.08-28.08 62.86-27.00 61.85-25.92C60.34-26.64 59.47-27.22 59.47-27.22C59.18-27.43 58.75-27.36 58.54-27.07C58.39-26.78 58.46-26.35 58.75-26.21C58.75-26.14 59.54-25.63 60.91-24.91C55.66-19.44 50.33-5.69 59.04-0.94ZM63-25.27C64.01-26.35 65.09-27.36 66.02-28.30C74.09-35.78 79.99-37.87 85.54-38.66C92.45-39.67 99.29-34.70 95.62-28.51C92.95-24.05 85.68-20.88 79.20-21.17C73.15-21.46 68.11-23.11 64.94-24.41ZM110.74 0.65C112.25 0.65 114.12 0.50 116.06-0.07C128.38-3.60 136.08-8.28 145.66-15.55C145.94-15.77 145.94-16.20 145.73-16.49C145.51-16.70 145.08-16.78 144.79-16.56C135.43-9.36 127.80-4.97 115.78-1.37C111.96-0.22 107.86-0.14 105.62-2.59C103.39-5.11 104.98-9.65 104.98-9.65C105.98-12.31 107.21-15.05 108.58-17.86C120.02-25.63 130.97-33.77 136.44-38.59C141.41-42.98 146.38-48.46 150.05-53.50C153.07-57.74 156.67-63.58 156.31-67.82C156.17-69.55 155.45-70.85 154.08-71.71C152.42-72.79 150.26-72.79 147.67-71.64C145.73-70.85 143.57-69.34 141.12-67.25C137.09-63.79 133.78-59.76 133.78-59.69L133.78-59.69C133.70-59.62 128.09-52.34 121.61-42.62C115.70-33.62 107.35-20.38 103.75-10.15C103.68-9.94 101.88-4.82 104.62-1.73C105.91-0.22 107.86 0.65 110.74 0.65ZM134.78-58.90L134.78-58.90C134.93-59.04 138.10-62.93 141.98-66.31C145.51-69.34 150.34-72.58 153.36-70.63C154.37-69.98 154.94-69.05 155.02-67.68C155.23-64.73 153.14-59.98 149.04-54.29C145.37-49.25 140.47-43.92 135.58-39.60C130.54-35.14 120.31-27.50 109.80-20.23C113.76-27.94 118.66-35.78 122.69-41.90C129.10-51.41 134.57-58.68 134.78-58.90ZM149.11 0.65C150.62 0.65 152.50 0.50 154.44-0.07C166.75-3.60 174.46-8.28 184.03-15.55C184.32-15.77 184.32-16.20 184.10-16.49C183.89-16.70 183.46-16.78 183.17-16.56C173.81-9.36 166.18-4.97 154.15-1.37C150.34-0.22 146.23-0.14 144-2.59C141.77-5.11 143.35-9.65 143.35-9.65C144.36-12.31 145.58-15.05 146.95-17.86C158.40-25.63 169.34-33.77 174.82-38.59C179.78-42.98 184.75-48.46 188.42-53.50C191.45-57.74 195.05-63.58 194.69-67.82C194.54-69.55 193.82-70.85 192.46-71.71C190.80-72.79 188.64-72.79 186.05-71.64C184.10-70.85 181.94-69.34 179.50-67.25C175.46-63.79 172.15-59.76 172.15-59.69L172.15-59.69C172.08-59.62 166.46-52.34 159.98-42.62C154.08-33.62 145.73-20.38 142.13-10.15C142.06-9.94 140.26-4.82 142.99-1.73C144.29-0.22 146.23 0.65 149.11 0.65ZM173.16-58.90L173.16-58.90C173.30-59.04 176.47-62.93 180.36-66.31C183.89-69.34 188.71-72.58 191.74-70.63C192.74-69.98 193.32-69.05 193.39-67.68C193.61-64.73 191.52-59.98 187.42-54.29C183.74-49.25 178.85-43.92 173.95-39.60C168.91-35.14 158.69-27.50 148.18-20.23C152.14-27.94 157.03-35.78 161.06-41.90C167.47-51.41 172.94-58.68 173.16-58.90ZM193.54 0.72C196.56 0.72 200.16-0.22 203.90-2.23C207.43-4.10 211.18-6.91 214.78-10.22C216.14-11.52 217.51-12.89 218.81-14.33C222.34-10.58 227.66-9.00 232.99-9.50C237.53-9.94 241.99-11.88 246.10-15.05C246.38-15.26 246.38-15.62 246.17-15.91C245.95-16.20 245.52-16.27 245.23-16.06C236.95-9.50 226.22-8.64 219.67-15.34C221.04-16.85 222.34-18.50 223.49-20.09C225.86-23.47 227.52-26.50 228.10-28.58C228.17-28.87 228.96-32.04 227.66-33.48C227.23-33.98 226.66-34.34 226.01-34.49C226.15-34.70 226.15-34.99 226.01-35.28C225.94-35.35 224.42-37.44 220.97-38.66C218.95-39.38 216.58-39.60 214.13-39.46C211.18-39.24 208.01-38.38 204.48-36.86C200.38-34.99 195.55-31.61 191.59-27.79C188.28-24.55 183.96-19.51 182.45-13.68C182.45-13.46 180.94-7.56 184.03-3.31C185.83-0.86 188.78 0.50 192.82 0.72ZM215.71-38.23C217.44-38.23 219.24-37.87 220.46-37.51C222.91-36.79 224.50-35.06 224.86-34.63C224.50-34.63 224.14-34.63 223.70-34.56C222.05-34.27 220.46-33.34 219.24-31.82C218.09-30.46 217.30-28.58 216.79-26.50C216.22-23.90 216.22-21.10 216.79-18.65C217.08-17.50 217.51-16.42 218.09-15.48C216.72-13.97 215.35-12.53 213.84-11.16C206.28-4.10 198.65-0.22 192.89-0.58C189.29-0.72 186.70-1.94 185.11-4.03C182.38-7.78 183.74-13.32 183.74-13.32C186.26-23.26 197.93-32.54 204.98-35.64C208.87-37.37 212.62-38.23 215.71-38.23ZM224.86-33.34C225.65-33.34 226.30-33.12 226.66-32.69C227.45-31.75 227.02-29.74 226.87-29.02C226.01-25.70 222.98-21.17 218.95-16.49C217.51-19.30 217.37-23.11 218.02-26.21C219.02-30.67 221.54-33.26 224.86-33.34Z"
/>
</svg>
Now, obviously no one can draw like that (unless they're an octopus).
The issue is with the path, but I cannot find an alternative way to achieve this. Inkscape, perhaps? Anyway, the path is generated by: https://www.npmjs.com/package/text-to-svg, using the League Script font from: http://www.quillingpatch.com/2015/01/31/list-of-free-single-line-fonts-for-rhinestones-pensmarkers/. text-to-svg does the job, but it doesn't suit this purpose. Some other issues:
League Script is supposed to be a single line font, but it seems that it uses fill. I've looked into Hershey fonts, engraving fonts, yet I haven't found something that would generate a path appropriate for animated drawing.
path.getTotalLength returns a length that is much longer than the actual length as the drawing is completed much earlier than when length reaches 0. Most likely caused by the way the path is.
The path needs to be translated by arbitrary values as it contains negative values (as in the CSS above). Would there be a better way to fix this than by parsing through the data to find the lowest negative X and Y values and then translating it by that amount?
Suggestions?

As you have said, the font you are using only appears to be a single line. But it is actually not. The paths in the characters go around the boundary of the font glyphs
This will be true of all fonts. So any text-to-svg utility will not work for you.
You will almost certainly have to convert the SVG to the suitable format yourself. Load your converted SVG into Inkscape (or your favourite vector editor) and manually trace the shape of each of your letters with single (non-filled) paths.
You will then have an SVG that will work with dash-offset animation.

Animation text in a snake way with canvas

I find this website -> http://bit.ly/1FCtQSQ and he has this animation scroll, which I am not interested, however in the middle of the scroll animation, a text snake animation appears. I want very badly to know how I can do this, just to learn.
I researched all plugins that curve texts, such as:
Arctext.js
CircleType
This one
Also, i tried 'still' the code from http://bit.ly/1FCtQSQ, but is minified, i know this guys are using the timelinemax, which uses the canvas, i tried to copy the code, but didn't work, as you can see here in the bottom of this question.
So i came here as the last resource.
Could someone give me an explanation with a working example, or maybe a plugin which i can study the code?
I know this is not the best way to find a answer to my question, but i don't have money to pay for codementor, hackhands, airpair or something like this.
Thanks!
Pen: http://codepen.io/anon/pen/GJjjxG
Code that i copy:
<h1 class="snake">Animate this like a snake!</h1>
var animation = new TimelineMax({
paused: !0,
ease: Linear.easeNone
});
var T = 0;
var f = 30;
animation.add(
TweenMax.to(e(".snake").parent(), f, {
left: -5e3
}), T);
Thanks.

The KonvaJS (formerly KineticJS) canvas library has some nice text-along-path code with a liberal MIT license:
https://github.com/konvajs/konva/blob/f6e2cf19a30dec2f94f50152f20c35988b1bf99e/src/plugins/TextPath.js
The KonvaJS TextPath code works like this:
Start with a path made up of curves and lines defined using the same syntax that SVG uses to define path.
Calculate waypoints along that path.
Fit characters one-by-one along the path using the calculated waypoints.
Use transformations to position the characters properly. (using context.translate & context.rotate to match the letter to the angle of the path / curve.)
You can cause the text to animate along the curve by beginning the text further & further beyond the first waypoint on the curve.
Example code using the KonvaJS libarary:
var stage = new Konva.Stage({
container: 'container',
width: 1000,
height: 1000
});
var layer = new Konva.Layer();
// add the layer to the stage
stage.add(layer);
var textpath = new Konva.TextPath({
x: 0,
y: 50,
fill: '#333',
fontSize: 16,
fontFamily: 'Arial',
text: 'Now is the time for all good men to come to the aid of their party -- An phrase from an old touch-typing test.',
data: 'M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100'
});
layer.add(textpath);
layer.draw();
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}
<script src="https://cdn.rawgit.com/konvajs/konva/0.9.0/konva.min.js"></script>
<div id="container"></div>

How to find the radius of the piechart/donut chart

I have a simplest highchart donut chart question. The question I have is what is the default radius of this donut chart. I have not specified the radius anywhere, but seems to have a default radius set somewhere. I could not figure out how this radius was set and was wondering if somebody could help me understand how this radius is set. I did go thru the api reference but could not find this info. Not sure if I missed something.
Here's a demo
$(function () {
$('#container').highcharts({
chart: {
type: 'pie'
},
plotOptions: {
pie: {
startAngle: 90,
animation: false,
innerSize: '60%'
}
},
series: [{
data: [
['Firefox', 44.2],
['IE7', 26.6],
['IE6', 20],
['Chrome', 3.1],
['Other', 5.4]
]
}]
});

You cannot find out size value using options or API because it seems there is no any for that. It seems that you cannot find it out using for example:
var chart = $('#container').highcharts();
console.log(chart);
and inspecting properties. You will find out that size is set to null.
You can find out size inspecting DOM svg elements. To make my job easier I changed option
innerSize: 180
and find out following svg elements (Note: it is not circle element):
...
<path fill="#8bbc21" d="M 532.7575883045118 30.763342348475817 A 140 140 0 0 1 685.1378163408548 95.11881271952285 L 642.2314533619781 120.79066531969326 A 90 90 0 0 0 544.2727353386148 79.41929150973445 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round" transform="translate(0,0)" visibility="visible"></path>
<path fill="#910000" d="M 685.2096374472518 95.23898645643143 A 140 140 0 0 1 696.8833100589593 120.0234896156345 L 649.7821278950453 136.8008147529079 A 90 90 0 0 0 642.2776240732333 120.86791986484879 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round" transform="translate(0,0)" visibility="visible"></path>
...
Those are svg path elements which build slices of pie chart donuts. A 140 140... and A 90 90... are elliptical arc command and 90,90 is rx, ry for inner size, and 140,140 for outer size. So radius is 140 in this case.
I don't know how it is calculated exactly but radius is calculated according to your container size and all different margins, plot borders, spacing... if you do not set size using option size.

It doesn't have a radius option it seems. But there is an option:
width: Number
An explicit width for the chart. By default the width is calculated from the offset width of the containing element.
Try it: 800px wide
Refer to this link

No radius option, but there is a diameter. You can express it in pixels (given by number) or as a percent of the chart area (give as string 'N%'):
size: String|Number The diameter of the pie relative to the plot area.
Can be a percentage or pixel value. Pixel values are given as
integers. The default behaviour (as of 3.0) is to scale to the plot
area and give room for data labels within the plot area. As a
consequence, the size of the pie may vary when points are updated and
data labels more around. In that case it is best to set a fixed value,
for example "75%". Defaults to .
Here's your fiddle with the pie chart 150% of the chart area.

Raphael JS Pie: Add ID to path slices

I've seen this question asked over at the Raphael Google Groups, but after hours of searching there, and also on here, and Google, I cannot seem to find a solution.
I would simply like to be able to target my pie chart (svg path) slices using jQuery, but I cannot figure out how to add custom id's to the path tags - there is no ID attribute in there by default:
<path fill="#764c29" stroke="none" d="M350,350L350.6911881148345,94.00093308961084A256,256,0,0,1,561.8463375189659,206.2741175716762Z" style="stroke-width: 1; stroke-linejoin: round;" stroke-width="1" stroke-linejoin="round"/>
What would be ideal would be this:
<path **id="my_id"** fill="#764c29" stroke="none" d="M350,350L350.6911881148345,94.00093308961084A256,256,0,0,1,561.8463375189659,206.2741175716762Z" style="stroke-width: 1; stroke-linejoin: round;" stroke-width="1" stroke-linejoin="round"/>
Has anyone got an idea how this could be achieved?
This is the code I'm using to create the pie chart:
window.onload = function () {
var r = Raphael("holder");
var pie = r.g.piechart(350, 350, 256, [56, 104, 158, 23, 15, 6]);
pie.hover(function () {
this.sector.stop();
this.sector.animate({scale: [1.1, 1.1, this.cx, this.cy]}, 500, "bounce");
}, function () {
this.sector.animate({scale: [1, 1, this.cx, this.cy]}, 500, "bounce");
});
};
Essentially, the reason I need to be able to do this, is so I can create some separate anchor triggers to perform the scale animations shown above.
Any help greatly appreciated.

the piechart object provides 3 ways to reach their sectors.
1) each function
pie.each(function(sector, cover, i) {
sector.attr({/*...*/}); //raphael
$(sector.node).foo(); //jquery
});
2) series object (for styling and transforming)
var i = 0; // 0 = 56, 1 = 104, 2 = 158 …
//raphael way to hide the first sector
pie.series.items[i].attr({ opacity : 0 });
//jquery way to hide the first sector
$(pie.series.items[i].node).hide();
whereby i is the index of your data-array
demo: http://jsbin.com/eriqa5/2/edit
3) covers object (for mouse and touch events)
//raphael way to hover the first sector
pie.covers.items[0].hover(...);
//jquery way to hover the first sector
$(pie.covers.items[0].node).hover(...);
demo: http://jsbin.com/eriqa5/4/edit

Categories