棒グラフの刻みを棒に合わせることができません

Question

私は棒グラフを作成しようとしています。

これは「を実行するために管理VEのものです：ダニが完全にバーが揃っていないか

お知らせ、

理想的に私は下にそれらを中心に、右のバーの下にそれらを持っていると思います各バー。

しかし、私は自分の位置を制御できないようです。ここで私は彼らに

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