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

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/

Answer 1

当你使矩形像这对于条形图使用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]); })