Question

你好世界＆gt;我一直在与这个问题作斗争一段时间。我试图创建一个条形图，它将一组对象作为数据，时间是一个日期对象，值是一个数字。

我的比例看起来像这样

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

我遇到下面的问题，其中刻度线有一些长度而轴是另一个，刻度线与条形图不匹配。

请各位朋友，帮我找到解决以下问题的方法。

My bar problem

D3条形图使用时间刻度矩形未对齐x轴

0 个答案: