Javascript 无法将刻度与条形图中的条形图对齐

我正在尝试d3，从尝试创建条形图开始

这就是我成功做到的：

请注意，记号如何与条形图不完全对齐

理想情况下，我想让他们在酒吧的权利，他们在每个酒吧的中心

但我似乎无法控制他们的位置。下面是我如何添加它们的

  //label array is an array of letter,correposding to a value in the original css file
 var xScale = d3.scale.ordinal()
      .domain(labelArray)
      .range([0, width])
      .rangeBands([0, width], 0.3);



 var hGuide=d3.select('svg').append('g') ;
      hAxis(hGuide);
      hGuide.attr('transform','translate('+margin.left+','+(height+margin.top)+')'); 

这就是我如何定位的酒吧

canvas

  .append('g')
  .attr('transform', 'translate('+ margin.left +', '+ margin.top +')')
  .selectAll('rect').data(bardata)
  .enter().append('rect')
      .style('fill', function(d,i) {
          return colors(i);
      })
      .attr('width', xScale.rangeBand())
      .attr('x', function(d,i) {
          return (i*(width/labelArray.length));
      })
      .attr('height', 0)
      .attr('y', height)

我似乎没有意识到这一点

---

这是fiddle上的完整代码，跨源策略将主要阻止您运行代码。尽管我认为这样描述它是有帮助的：

当您为条形图制作这样的矩形时，请使用xScale，而不是执行下面的操作

selectAll('rect').data(bardata)
        .enter().append('rect')
            .style('fill', function(d,i) {
                return colors(i);
            })
            .attr('width', xScale.rangeBand())
            .attr('x', function(d,i) {//this is wrong
                return (i*(width/labelArray.length));//remember variable i will be 0 @ the start of the loop that is why first bar starts with 0.
            })
            .attr('height', 0)
            .attr('y', height)

因此，与其这样做，不如：

.attr('x', function(d,i) {
                return (i*(width/labelArray.length));
            })

这样做：

.attr("x", function(d, i) { return xScale(labelArray[i]); })