Javascript 使用不与x轴对齐的时间刻度矩形的D3条形图

你好，世界>我已经和这个问题斗争了一段时间了。我正在尝试创建一个条形图，它将对象数组作为数据，时间是一个日期对象，值是一个数字

我的秤是这样的

d3.time.scale.utc()
           .domain(d3.extent(data, function (d) { return d.time; }))
           .rangeRound([20, this.state.width - 60]).nice(data.length);

我的矩形是这样画的，用同样的比例

      const self = this,
      xScale = this.state.xScale,
      yScale = this.state.yScale,
      barWidth = this.getBarWidth(data.length),
      bars = chart.selectAll('rect')
                   .data(data);
  // UPDATE
  bars
    .transition()
      .duration(500)
      .style('fill', color)
      .attr('x', function(d) { 
          console.log(xScale(d.time)- (barWidth / 2));
          return xScale(d.time) - (barWidth / 2); 
       })
      .attr('width', barWidth)
      .attr('y', function(d) { return yScale(d.value); })
      .attr('height', function(d) { return self.state.height - yScale(d.value); });
  // ENTER
  bars
    .enter()
      .append('rect')
      .style('fill', color)
      .attr('class', 'bar')
      .attr('x', function(d) { 
          console.log(xScale(d.time) - barWidth);

          return xScale(d.time) - barWidth; 
       })
      .attr('width', barWidth + (barWidth / data.length))
      .attr('y', function(d) { return yScale(d.value); })
      .attr('height', function(d) { return self.state.height - yScale(d.value); });
  // EXIT
  bars
    .exit()
    .transition()
      .duration(500)
      .style('fill', 'red')
      .style('opacity', 0)
      .remove();

下面的问题是，记号有一些长度，轴有另一个长度，记号标记与条不匹配

请朋友们，帮我找到下面问题的解决方案

---

在我看来，您将条形图翻译了两次：一次在回车处，一次在更新处。也许只有一个翻译就足够了？你是说4月2日应该有酒吧吗？你能分享你的数据吗，这样我们就可以重现这种情况了？或者创建一个示例jsFiddle或Plunker？@标记条的数量与矩形的数量相同。标签有点混乱，我的任务是让它们更详细，以防出现多个标签day@HuguesStefanski不确定您在哪里看到多个翻译？对不起，我是指x位置。在更新阶段设置，然后在输入阶段再次设置，每种情况下的结果都不同。