Ajouter des étiquettes à barres dans le graphique d3

Question

Je suis frappé d'essayer d'ajouter des étiquettes de barres dans mon graphique. Je veux que le nombre de tickets de mon tableau survole chaque barre. Voici à quoi ressemble ma carte maintenant.

Voici mon code:

var data = [ 
     {"year":2013,"tickets": 500}, 
     {"year":2014,"tickets": 1500}]; 

    //creates svg 
    var chart = d3.select('#chart').append('svg') 
     .style('background', '#E7E0CB') 
     .attr('width', width + margin.left + margin.right) 
     .attr('height',height + margin.top + margin.bottom) 
     .append('g') 
     .attr('transform', 'translate('+ margin.left +','+ margin.right +')') 
     .style('background','#eee') 

chart.selectAll('rect') 
      .data(data)//read bar data 
      .enter() 
      .append('rect')//data makes a rectangle 
        .style('fill','steelblue') 
        .attr('width', xScale.rangeBand()) 
        .attr('height', function(d){return yScale(d.tickets);}) 
        .attr('x', function(d, i) {return xScale(d.year);})  
        .attr('y', function (d) {return height - yScale(d.tickets);}) //sets bars at the bottom 

    chart.selectAll("rect") 
      .data(data).enter() 
      .append("text")     
       .attr("x", function(d) { return xScale(d.tickets); }) 
       .attr("y", function(d) { return yScale(d.tickets); }) 
       .text(function(d) { return (d.tickets); }); 

Answer 1

Cela devrait faire l'affaire pour vous:

var text = chart.selectAll(".text") 
    .data(data) 
    .enter() 
    .append("text") 
    .attr("class","text"); 

var labels = text.attr("x", function (d) { 
     return xScale(d.year) + xScale.rangeBand()/2; 
    }) 
    .attr("y", function (d) {return yScale(d.tickets);}) 
    .text(function (d) { return d.tickets;}); 

Voici une FIDDLE minimale avec l'extrait ci-dessus et quelques corrections mineures à la code que vous avez posté.