围绕一个有半径的圆圈排列不同的高度div

Question

所以，我一直在尝试创建大量的div(我们可以称之为条形图(，并让它们旋转和定位，以便在中心创建一个圆圈。我不擅长解释，所以这里有一个例子，其中所有条形都具有相同的宽度和高度。
JSFiddle 在这里：

这里的一切都看起来不错。但是，当我更改条形的高度时，就会出现问题。JSFiddle 在这里：

我认为我的麻烦源于我的定位和旋转功能混乱或绝对定位的性质。这是我的第二个JSFiddle的js示例。

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;
    }
});

有没有办法保持所有div/条的圆半径，即使高度与我的示例不同？(我是相对较新的js，所以请原谅我糟糕的代码(

Answer 1

我添加了

transform-origin: center top;

到你的风格。这样，元素只会在一个方向上增长：

小提琴

Answer 2

代码按预期执行，您在绕圈时正在更改高度。 但是，如果将高度更新为实心数字，则它将正常运行：

$bars[i].css('height', 20);

https://jsfiddle.net/rzt5L0sh/1/