D3 堆叠图问题与 x 轴上的条形位置有关答案

【问题标题】：D3 stacked graphs issue with bar position on x-AxisD3 堆叠图问题与 x 轴上的条形位置有关
【发布时间】：2016-08-11 06:20:29
【问题描述】：

我在fiddle 上创建了示例

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

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

【问题讨论】：

Kamlesh，5 月和 6 月的漂移，因为你正在通过 'Mon May 07' 和 jun Mon Jun 11。而如果你看到 apr 是正确的，原因是数据有 @ 987654323@希望这能回答为什么酒吧位置变得奇怪。
感谢@Cyril 成功

标签： javascript d3.js graph

【解决方案1】：

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

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

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

工作代码here

【讨论】：

【解决方案2】：

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

【讨论】：