如何在D3.js中均匀排列圆圈并保持圆周之间的距离相等

Question

我有一个数据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})

这是我的问题：

如何通过（仍动态地）保持圆圈在圆周之间保持相等的距离？

Answer 1

IIUIC，这是一种方式。让我们说，

直径端点之间的间隙为gap，（红线长度）

base是当前圆圈的左直径点

base + d为您提供当前圈子的中心

newbase是下一个圆圈的左直径点

var myData1 = [5, 10, 15]
var mySvg1 = d3.select('body').append('svg')

var base = 90
var newbase = 90
var gap = 20
mySvg1.selectAll('circle').data(myData1).enter().append('circle')
    .attr('cx', function(d, i){
      base = newbase
    	newbase = newbase + 2*d + gap
    	return base + d
      })
    .attr('cy', '55')
    .attr('r', function(d){return d})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

https://jsfiddle.net/utfk44tL/