score:2

Accepted answer

The drift in the month May and Jun because you are passing Mon May 07 and for Jun Mon Jun 11. While if you see for Apr its correct the reason is that the data has Apr 01

One solution could be to change the data to the first of the month using the code below:

  .attr("x", function(d) {
    var date = new Date(d.x.getFullYear(), d.x.getMonth(), 1);
    return x(date) - 12;
  })

working code here

score:0

Here, issue is with the width you selected for bar. change the width and highlight the x-axis clearly will solve your issue.

var xAxis = d3.svg.axis()
          .scale(x)
          .orient("bottom")
    .tickSize(-width, 0, 0)
          .ticks(d3.time.months)
          .tickFormat(d3.time.format("%b"));

var rect = groups.selectAll("rect")
              .data(function(d) { return d; })
              .enter()
              .append("rect")
              .attr("x", function(d) { return x(d.x) - 4; })
              .attr("y", function(d) { return y(d.y0 + d.y) ; })
              .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
              .attr("width", 5)

              .on("mouseover", function() { tooltip.style("display", null); })
              .on("mouseout", function() { tooltip.style("display", "none"); })
              .on("mousemove", function(d) {
                var xPosition = d3.mouse(this)[0] - 15;
                var yPosition = d3.mouse(this)[1] - 25;
                tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
                tooltip.select("text").text(d.y);
              });

you can chanage the color of X-axis accordingly.

enter image description here


Related Query