javascript - Stacked Bar Chart D3js -

i'm trying develop stacked bar chart d3js. i'm having trouble position on x-axis in size of bars... can help? above it's code , data used... if necessary change way data coming... thank's!

var dadosacessos = [{    _id: {      fullname: 'vis. curso 13',      recurso_id: 149,      day: 17,      month: 07,      year: 2014,      fulldata: '2014/07/17'    },    acessos: 7  }, {    _id: {      fullname: 'vis. curso 13',      recurso_id: 149,      day: 18,      month: 07,      year: 2014,      fulldata: '2014/07/18'    },    acessos: 3  }, {    _id: {      fullname: 'recurso',      recurso_id: 150,      day: 18,      month: 07,      year: 2014,      fulldata: '2014/07/18'    },    acessos: 1  }, {    _id: {      fullname: 'vis. curso 13',      recurso_id: 149,      day: 14,      month: 11,      year: 2014,      fulldata: '2014/11/14'    },    acessos: 1  }];    var color = d3.scale.category20();      // chart dimensions  var margin = {      top: 20,      right: 80,      bottom: 100,      left: 40    },    width = 1000 - margin.right - margin.left,    height = 300 - margin.top - margin.bottom;    // define main svg element in #graph  var svg = d3.select("#acessos").append("svg")    .attr("width", width + margin.left + margin.right)    .attr("height", height + margin.top + margin.bottom);    var graph = svg.append("g")    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");    var y = d3.scale.linear().range([height, 0]);    var yaxis = d3.svg.axis()    .scale(y)    .orient("left");    var len = 0;    dadosacessos.foreach(function(d) {    d.fullname = d._id.fullname    d.date = new date(d._id.year + "/" + d._id.month + "/" + d._id.day);    len++;  });    var nestbydate = d3.nest()    .key(function(d) {      return d.date;    })    .sortvalues(function(a, b) {      return ((a.acessos < b.acessos) ? -1 : 1);      return 0;    })    .entries(dadosacessos);    nestbydate.foreach(function(d) {    var y0 = 0;    var y1 = 0;    d.vis = "1";    d.values.foreach(function(d) {        // y0 y axis start of bar      d.y0 = y0 + y1;        // y1 y axis end of bar      d.y1 = y1 = d.acessos;        // d.vis controls whether bars visible or not      d.vis = "1";    });  });    var x = d3.time.scale().range([0, width], .1);  x.domain([    d3.min(dadosacessos, function(d) {      return d.date.setdate(d.date.getdate() - 1);    }),    d3.max(dadosacessos, function(d) {      return d.date.setdate(d.date.getdate() + 2);    })  ]);    // y axis domain (ie: time)  y.domain([0, d3.max(dadosacessos, function(d) {    return d.acessos;  })]);    // create brush mini graph  var brush = d3.svg.brush()    .x(x)    .on("brush", brushed);    // define x axis  var xaxis = d3.svg.axis()    .scale(x)    .ticks(d3.time.months)    .orient("bottom");    graph.append("g")    .attr("class", "x axis mini_axis")    .attr("transform", "translate(0," + (height + 1) + ")")    .call(xaxis);    // add brush  graph.append("g")    .attr("class", "x brush")    .call(brush)    .selectall("rect")    .attr("y", -10)    .attr("height", height + 15);    // add y axis  graph.append("g")    .attr("class", "y axis")    .attr("transform", "translate(0,0)")    .call(yaxis)    .append("text")    .attr("transform", "rotate(-90)")    .attr("y", 6)    .attr("dy", ".71em")    .style("text-anchor", "end")    .text("acessos")    .attr("class", "y_label");    var bar = graph.selectall(".bars")    .data(nestbydate)    .enter()    .append("g");    bar.selectall("rect")    .data(function(d) {      return d.values;    })    .enter().append("rect")    .attr("width", function(d) {      return width / (len * 2);    })    .attr("x", function(d) {      return x(d.date.setdate(d.date.getdate() + 1)) - (width / len) / 2;    })    .attr("y", function(d) {      return y(d.y1);    })    .attr("fill", function(d) {      return color(d.fullname);    })    .attr("height", function(d) {      return y(d.y0) - y(d.y1);    });    function brushed() {    var dataini = new date(brush.extent()[0]);    var datafim = new date(brush.extent()[1]);    console.log("brush");  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>      <div id="acessos"></div>

the rectangles overlapping on each other. place each bar near x-axis tick, x-attribute of rect has varied. modify code @ .attr("x",function(d,i){return i*width/4;}) d3.js provides argments go in anonymous function. d data value , i used index of data item

bar.selectall("rect")   .data(function(d) {     return d.values;   })   .enter().append("rect")   .attr("width", function(d) {     return width / (len * 2);   })   .attr("x", function(d,i) {     return i*width/4;   .attr("y", function(d) {     return y(d.y1);   })   .attr("fill", function(d) {     return color(d.fullname);   })   .attr("height", function(d) {     return y(d.y0) - y(d.y1);   });