1

Using the example from "How to achieve donut holes with paths in raphael" ( How to achieve 'donut holes' with paths in Raphael ) I was able to tweek the code a bit more to my use-case.

My next goal with this is to enlarge one of the sectors on mouse over, without pulling it away from the inside circle. Is this possible?

Here's the current code: http://jsfiddle.net/Swivelgames/efb9n/1/

I'm hoping to make it look like this:

ideal result

Community
  • 1
  • 1
Swivel
  • 3,020
  • 26
  • 36
  • The basic issue is that you can't do what you want _just_ using `Element.transform()`. You'd need to alter the path itself. – Matt Ball Nov 15 '11 at 19:09
  • Understood. What all about the path needs to be altered? Is this something you'd be able to help me with? – Swivel Nov 15 '11 at 19:54

2 Answers2

3

Evening,

I've sort of cheated here. The way the donut is working right now is by using scaling, but to do what you want you can't go that way. The options are to recalculate the sector, or to cheat. I've done both.

I've added a second donut with bigger sectors, which I've then hidden. On the original donut, the mouseover hides the appropriate sector and displays the sector from the bigger ring.

The outer ring has a mouseout function which reverses the process.

Heres a fiddle that hopefully shows it working.

It's not the optimal solution, but it might help you along.

amadan
  • 1,514
  • 10
  • 14
  • Perfect! I cheated a bit too on my solution, but it tossed out the aesthetically needed thin white borders around each tab, and was much dirtier. Thanks a lot for this. It may not be "ideal" but it works great :) I eventually changed the "mouseover/out" to a click event. Here's the new fiddle: http://jsfiddle.net/Swivelgames/sCKcu/ Thanks again amadan. – Swivel Nov 16 '11 at 15:36
  • @Swivelgames, your donut code is looking great. Basically your code is drawing the donut in anti-clock direction, I am wondering whether we can draw that in clock direction with some changes to your code, can you please help me to do that? – Siva Sep 28 '12 at 11:56
  • I imagine that changing the line angle += angleplus; to angle -= angleplus; should reverse the direction of the rendering. You could try that... – amadan Sep 30 '12 at 15:50
  • @amadan, thanks for your response, I will try that once. It seems there is a limitation for this donut creation function, basically donut is getting created properly only if there are at least 2 VALUES. You can check this scenario at http://jsfiddle.net/VdTH4/241/. Please check it once and let me know how to handle these kind of scenarios. – Siva Oct 04 '12 at 08:28
  • 2
    I *could* fix this for you, but I won't. I will tell you that the problem is that with only one value (of 100%), the start and end angle are effectively the same. What you'll need to to is modify the code to catch when the angle is 360 degrees and reduce it minutely. Here's a hint - it's the angleplus value. – amadan Oct 04 '12 at 11:55
0

just change the angleplus value from 360 to 369.5... should be sufficient... :)

Martin Adelstein
  • 1
  • 1