Как равномерно расположить круги в 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 
 
    \t newbase = newbase + 2*d + gap 
 
    \t 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/