Recently, I've been attempting to generate a multitude of divs (referred to as bars) and position them in a way that forms a circle in the center. To clarify, here's an example where all bars share the same width and height.
Check out the JSFiddle here:
Initially, everything appears fine. However, issues arise when I modify the heights of the bars. Link to the problematic JSFiddle:
I suspect that my difficulties stem from errors in my positioning and rotation functions, or possibly due to the effects of absolute positioning. Below is an excerpt of the JavaScript code used in the second JSFiddle.
var $bars = [];
var viz = document.getElementById('viz');
function create(num) {
for(var i = 0; i < num; i++) {
var a = document.createElement('div');
a.classList.add('bar');
viz.appendChild(a);
$bars.push($(a));
}
}
create(256);
$(document).ready(function(){
var step = Math.PI * 2 / $bars.length;
var radius = 200;
var angle = 0;
for (var i = 0; i < $bars.length; i++) {
var x = Math.round(radius * Math.cos(angle));
var y = Math.round(radius * Math.sin(angle));
$bars[i].css('left', x + 'px');
$bars[i].css('top', y + 'px');
$bars[i].css('height', i + 1);
var rot = 90 + (1.4025 * i);
$bars[i].css('transform', 'rotate(' + rot + 'deg)');
angle += step;
}
});
Is there a way to preserve the circular radius with all divs/bars, even when their heights differ from the example provided? (I'm rather new to JavaScript, so please bear with my subpar code)