Javascript D3堆叠图形问题，x轴上的条形图位置

我已经在上创建了示例

---

我面临x轴位置值的问题。它并没有显示在准确的位置上。

这里，问题在于您为条选择的宽度。更改宽度并清楚地突出显示x轴将解决您的问题

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

您可以相应地更改X轴的颜色

---

5月和6月的漂移，因为您将通过2007年5月1日的

周一

和6月11日的

周一

。 而如果您看到Apr是正确的，则原因是数据具有

Apr 01

一种解决方案是使用以下代码将数据更改为每月的第一天：

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

---

工作代码

Kamlesh，5月和6月的漂移，因为您将通过“2007年5月1日”和6月11日。如果你看到apr是正确的，原因是数据有

apr 01

希望这能回答为什么条形图的位置会变得奇怪。谢谢@Cyril它起作用了

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