Solved

Calculate x y positions SVG circle elements

Posted on 2013-06-24
5
503 Views
Last Modified: 2013-07-17
Hi

Im trying to create the attached diagram using SVG

For the outer circle (made of 27 circles), does anyone know an algorithm that could calculate the x and Y positions of each circle . Each circle has a radius of 70

Thanks
map.png
0
Comment
Question by:coolispaul
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 5

Expert Comment

by:truinx
ID: 39271749
Your question is interesting. I would like to know also.

By the way, the algorithm will also depend on the length of the string the circle is attached to. Do you have any specific length of the string? Or the string is irrelevant as long as the circles are adjacent to one another?
0
 

Author Comment

by:coolispaul
ID: 39271801
What do you mean by the length of the string?

yeah the circles should just be adjacent to one another to form 1 big circle. ( similar to attached graphic)
My circles have a radius of 70 pixels

Thanks
0
 
LVL 15

Accepted Solution

by:
Jagadishwor Dulal earned 500 total points
ID: 39274247
There is option to calculate the position :

var pos = $("#myimage").position(); // returns an object with the attribute top and left
pos.top;  // top offset position
pos.left; // left offset position

Open in new window

0
 

Author Comment

by:coolispaul
ID: 39277359
Does that not just calculate positions?

If i have 27 circles of 70 pixels radius how can i find out the x and y posittins for each circle to form one big circle (like graphic attached)?

Cheers
0
 
LVL 5

Expert Comment

by:truinx
ID: 39284077
I am stupid in giving exact answer for math questions.

But you need to to have a starting point.
The circumference of the big circle that is formed by small ones:
BC(circumference) = sum(of all SC[diameter])

d = 0radian
element=0
maxelement =27
Loop until element > maxElement
SC(element).position = touching the d radian(BC)
Element = element +1
d = d + radian of SC
Loop

Just an idea.
0

Featured Post

Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
bootstrap wrap text 1 36
Allow a tab area under the contents 1 26
Building JSON/JQuery Results Display 11 29
How do I wrap text in dialog window 6 7
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
The viewer will learn how to count occurrences of each item in an array.
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question