无法将条形图中的标记与条形对齐

Question

我正在尝试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)

似乎没有理解这个，

以下是关于小提琴的完整代码，交叉原始政策将主要阻止您运行代码。虽然我认为这样描述是有帮助的：https://jsfiddle.net/vhs1fwfp/