Question

I’m trying to develop a component that should look somewhat like this

I’m using RaphaelJS to draw this and that works just fine. I have an array of angles which I use to calculate the paths of the individual segments. I store these paths in a simple array so the inner circle is at segments[0] and so on spiralling outwards.

My problem is that I need each segment to be aware of it’s adjacent segments both clockwise, anti-clockwise, inwards and outwards and I’m having difficulty figuring out how to calculate the position of these is my segment array. So for instance, in the case of the above diagram, the red segment at level 2 (where 0 is the inner-most circle) has red, bright green, kaki, light purple and dark purple neighbours.

Perhaps I need a different coordinate system. If each level had the same number and angle distribution of segments it would be a simple case of using modulus’s like indexing a circular array but this isn’t the case.

Any help would be much appreciated.

Many Thanks,

Anthony

Answer 1

I’d change how you’re storing the segments from one sorted array into one sorted array per level.

Finding the neighbours of a given segment (S) is then fairly easy: the left and right neighbours are the previous and next elements of that level’s array.

The neighbours in the adjacent levels are found with a couple of binary searches in those arrays: find the segments that coincide with the start and end angles of S, the neighbours are the sequence of segments between those two.