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

Question

我在fiddle

上创建了示例

[https://jsfiddle.net/xx5fkwb4/][1]

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

Answer 1

5月和6月的漂移，因为您正在通过Mon May 07和Jun Mon Jun 11。 虽然如果您看到4月其正确的原因是数据有Apr 01

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

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

工作代码here

Answer 2

此处，问题在于您为条形图选择的宽度。更改宽度并清楚地突出显示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轴的颜色。