javascript - D3JS : Create distinct arc paths -

i'm trying draw arcs corresponding data. plnkr

actually there 2 numbers in data. whenever i'm trying create 2 arcs, merging together.

var pi = math.pi, arcradius = 55, arcthickness = 2; var gaugedata = [32, 57]; var svg = d3.select('.circles').append('svg');  var arcfunc = d3.svg.arc()     .innerradius(55)     .outerradius(57)     .startangle(0)     .endangle(function(d) { return d * (pi /180); });  svg.attr("width", "400").attr("height", "400")     .selectall('path').data(gaugedata).enter().append('path')     .attr('d', function(d) { return arcfunc(d); })     .attr('fill', '#555')     .attr('cx', function(d, i) { return * 100 + 30; })     .attr('cy', function(){ return 50; })     .attr("transform", "translate(200,200)"); 

the arcs like:

please help. in advance.

i'm assuming gaugedata degree value total sweep of arc. so, first step d3ify data creating array of start/stop angles. drawing becomes easy:

var pi = math.pi, arcradius = 55, arcthickness = 2;  var gaugedata = [32, 57, 180];  var svg = d3.select('body').append('svg');    var data = gaugedata.map(function(d,i){    var start = 0;    (var j = 0; j < i; j++){      start += gaugedata[j];  // start angle value sum of sweeps before    }    var end = start + d; // end angle start + sweep    return {      start: start,      end: end    };  });    var colors = d3.scale.category10();    var arcfunc = d3.svg.arc()      .innerradius(55)      .outerradius(57)      .startangle(function(d) { return d.start * (pi /180); })      .endangle(function(d) { return d.end * (pi /180); });    svg.attr("width", "400").attr("height", "400")      .selectall('path').data(data).enter().append('path')      .attr('d', function(d) { return arcfunc(d); })      .attr('fill', function(d,i){ return colors(i); })      .attr("transform", "translate(200,200)");

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

---

edits comments

putting arcs side-by-side lot easier, change transform each one. note, cx , cy not valid path:

var pi = math.pi, arcradius = 55, arcthickness = 2;  var gaugedata = [32, 57, 180];  var svg = d3.select('body').append('svg');    var colors = d3.scale.category10();    var arcfunc = d3.svg.arc()      .innerradius(55)      .outerradius(57)      .startangle(function(d) { return 0; })      .endangle(function(d) { return d * (pi /180); });    svg.attr("width", "400").attr("height", "400")      .selectall('path').data(gaugedata).enter().append('path')      .attr('d', function(d) { return arcfunc(d); })      .attr('fill', function(d,i){ return colors(i); })      .attr("transform", function(d,i){           return "translate("+ ((i * 75) + 10) + ",75)";      });

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