javascript - d3 connected series circles -

i trying create application circles touch edges of each other.

i having issues trying calculate cx function.

.attr("cx", function(d, i) {   return (i * 50) + 50; //math.sqrt(d) ;// + 50;  }) 

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);     }); 

here i'm using "counter" add values...

var counter = 0; 

... , assigning data variable...

var data = [400, 100, 1000, 300]; 

... better accessing different indices.

then, each circle element, set cx attribute:

.attr("cx", function(d, i) {     return ? (counter += math.sqrt(data[i - 1]) + math.sqrt(data[i])) : counter; }) 

i put ternary operator because, of course, there no data[i - 1] first circle. thus, mathematical explanation:

• for first circle: return counter (or i), zero.
• from second circle on: add both circle's radius (math.sqrt(data[i])) , last circle's radius (math.sqrt(data[i - 1])) counter, , return counter.

here demo:

$(document).ready(function() {        var rawdata = [{      "name": "twitter",      "items": [{          "label": "15 billion",          "unit": "per day",          "value": 5500        }        /*,        				{        					"label" : "450 checkins",        					"unit" : "per day",        					"value" : 400        				}*/      ]    }, {      "name": "facebook",      "items": [{          "label": "5 billion",          "unit": "per day",          "value": 3000        }        /*,        				{        					"label" : "2000 checkins",        					"unit" : "per day",        					"value" : 1500        				}*/      ]    }, {      "name": "ebay",      "items": [{          "label": "7 billion",          "unit": "per day",          "value": 300        }        /*,        				{        					"label" : "300 checkins",        					"unit" : "per day",        					"value" : 500        				}*/      ]    }];        var el = $('.serieschart');    var w = el.data("width");    var h = el.data("height");        var margin = {      top: 65,      right: 90,      bottom: 5,      left: 150    };      var counter = 0;      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 + ")");      var data = [400, 100, 1000, 300];      svg.selectall("circle")      .data(data)      .enter().append("circle")      .attr("cy", 60)      .attr("stroke", "black")      .attr("cx", function(d, i) {        return ? (counter += math.sqrt(data[i - 1]) + math.sqrt(data[i])) : counter;      })      .attr("fill", function(d, i) {        return "#00ccff";      })      .attr("r", function(d) {        return math.sqrt(d);      });          });

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  <script src="http://d3js.org/d3.v3.min.js"></script>  <div id="holder">    <div class="serieschart" data-role="serieschart" data-width=450 data-height=180></div>  </div>