How to place SVG shapes in a circle?

Question

I play a little with D3.js and everything works for me. But I want to place my SVG shapes in a circle. Therefore, I will show the difference in data with color and text. I know how to draw circles and pie charts, but I want basically a circle of the same size. And do not overlap them; order does not matter. I don’t know where to start to find out x and y for each circle.

Answer 1

Here's another approach to arbitrary sized forms using the D3 tree layout: http://jsfiddle.net/nrabinowitz/5CfGG/

The tree layout ( docs , example ) will determine the x, y placement of each element for you based on the specified radius and a function that returns the separation between the centers of any two elements. In this example, I used circles of different sizes, so the separation between them is a function of their radii:

 var tree = d3.layout.tree() .size([360, radius]) .separation(function(a, b) { return radiusScale(a.size) + radiusScale(b.size); }); 

Using the D3 tree layout solves the first problem by exposing the elements in a circle. The second problem, as @Markus notes, is how to calculate the right radius for a circle. I took a slightly rough approach here for the sake of expediency: I evaluate the circle circumference as the sum of the diameters of various objects with a given gap between them, and then calculates the radius around the circle:

 var roughCircumference = d3.sum(data.map(radiusScale)) * 2 + padding * (data.length - 1), radius = roughCircumference / (Math.PI * 2); 

The circle here is not accurate, and it will be less and less accurate than the fewer objects in your circle, but it is close enough for this purpose.

Answer 2

If I understand you correctly, this is a pretty standard math question:

Just loop some angle variable in the appropriate step size and use sin() and cos() to calculate your x and y values.

For example:

Let's say you are trying to place 3 objects. There are 360 ​​degrees in a circle. Therefore, each object is at a distance of 120 degrees from the next. If your objects are 20x20 pixels in size, put them in the following places:

  x1 = sin( 0 * pi()/180) * r + xc - 10; y1 = cos( 0 * pi()/180) * r + yc - 10 x2 = sin(120 * pi()/180) * r + xc - 10; y2 = cos(120 * pi()/180) * r + yc - 10 x3 = sin(240 * pi()/180) * r + xc - 10; y3 = cos(240 * pi()/180) * r + yc - 10 

Here r is the radius of the circle, and (xc, yc) are the coordinates of the center point of the circle. -10's make sure the objects have their center (and not their upper left corner) on the circle. * pi()/180 converts degrees to radians, which require most implementations of sin() and cos() .

Note. This places the shapes evenly distributed in a circle. To make sure that they do not overlap, you should choose your r large enough. If the objects have simple and identical borders, just lay out 10 of them and choose the radius you need, and then, if you need to place 20, make the radius twice as large, 30 times as much as three, and so on. If the objects are irregular in shape and you want to place them in an optimal order in a circle to find the smallest circle, this problem will be extremely messy. Maybe there is a library for this, but I do not have one at the top of my head, and since I have not used D3.js, I am not sure if it will provide this function.