how to evenly arrange circles in D3.js and keep equal distance between circumferences - d3.js

Question

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?

Answer 1

IIUIC, Here's one way. Let's say,
Gap between diameter endpoints is gap, (length of red lines)
base is current circle's left diameter point
base + d gives you current circle's center
newbase is next circle's left diameter point
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/