I am currently working on developing an application where the circles are positioned such that they touch each other's edges.
One of the challenges I am facing is with the calculation for the cx function.
.attr("cx", function(d, i) {
return (i * 50) + 50; //Math.sqrt(d) ;// + 50;
})
https://i.sstatic.net/W974M.png
http://jsfiddle.net/59bunh8u/56/
var el = $('.serieschart');
var w = el.data("width");
var h = el.data("height");
var margin = {
top: 65,
right: 90,
bottom: 5,
left: 150
};
var svg = d3.select(el[0]).append("svg")
.attr("class", "series")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.selectAll("circle")
.data([400, 100, 1000, 300])
.enter().append("circle")
.attr("cy", 60)
.attr("cx", function(d, i) {
return (i * 50) + 50; //Math.sqrt(d) ;// + 50;
})
.attr("fill", function(d, i) {
return "#00ccff";
})
.attr("r", function(d) {
return Math.sqrt(d);
});