無法將刻度線與條形圖中的條形圖對齊

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]); })