如何在D3.js中均匀排列圆圈并保持圆周之间的距离相等(how to evenly arrange circles in D3.js and keep equal distance between circumferences)

 我有一个数据var myData1 = [5, 10, 15] ，我想用圆形可视化它。 
 
 所以，我从var mySvg1 = d3.select('body').append('svg') 
 
 第一种安排圈子的方式是这样的： 
 
  
 
 每个中心之间的距离相等，我可以用下面的代码实现它： 
 
mySvg1.selectAll('circle').data(myData1).enter().append('circle')
    .attr('cx', function(d,i){return 100+(i*44)})
    .attr('cy', '55')
    .attr('r', function(d){return d})
 
 第二种方式是这样的： 
 
  
 
 每个中心之间的距离相应地增加到数组中的值： 
 
var myHelp1 = 100
mySvg1.selectAll('circle').data(myData1).enter().append('circle')
    .attr('cx', function(d,i){
        myHelp1 += d + i*22
        return myHelp1
    })
    .attr('cy', '55')
    .attr('r', function(d){return d})
 
 这是我的问题： 
 
  
 
 如何通过（仍然是动态的）在圆周之间保持相等的距离来均匀排列圆？ 

I have a data var myData1 = [5, 10, 15] and I want to visualize it with circles.
 
So, I start with var mySvg1 = d3.select('body').append('svg')
 
The FIRST way to arrange circles is this:
 
 
Distance between every center is equal, I can achieve it with this code:
 
mySvg1.selectAll('circle').data(myData1).enter().append('circle')
    .attr('cx', function(d,i){return 100+(i*44)})
    .attr('cy', '55')
    .attr('r', function(d){return d})
 
The SECOND way is this:
 
 
Distance between every center is increasing accordingly to the values in array:
 
var myHelp1 = 100
mySvg1.selectAll('circle').data(myData1).enter().append('circle')
    .attr('cx', function(d,i){
        myHelp1 += d + i*22
        return myHelp1
    })
    .attr('cy', '55')
    .attr('r', function(d){return d})
 
And here is MY QUESTION:
 
 
How to evenly arrange circles by (still dynamically) keeping equal distance between circumferences?

原文：https://stackoverflow.com/questions/42178912