Balken können im Balkendiagramm nicht an Balken angepasst werden

Question

Ich probiere d3 aus, habe mit dem Versuch begonnen, ein Balkendiagramm zu erstellen.

Dies ist, was geschafft habe zu tun:

Beachten Sie, wie die Zecken nicht perfekt mit den Stäben ausgerichtet sind,

ideal möchte ich sie unter den Bars Recht haben, so dass sie unter Zentrierung jede Bar.

Aber ich kann nicht scheinen, ihren Standort zu kontrollieren. Hier ist, wie ich sie am Hinzufügen

//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)+')'); 

Und das ist, wie ich Position, um die Stäbe

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) 

meinen Kopf nicht scheinen, dies zu umgehen,

Dies ist der komplette Code auf Geige, die Kreuzursprungspolitik würde dich meistens davon abhalten, den Code zu laufen. Obwohl ich dachte, dass es hilfreich war, es so zu beschreiben: https://jsfiddle.net/vhs1fwfp/

Answer 1

Wenn du die Rechtecke magst Dies für das Balkendiagramm verwenden Sie stattdessen die xScale wie folgt.

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) 

Statt dies zu tun:

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

dies tun:

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