Q: How to add text legends in bars of a bar chart in D3? I am trying to add Text/Label to my bars in a bar chart using D3.Js.
My texts are appending but from the second index data first index is skipped I dont know why it is doing like this .I have debugged the dat ,data is coming correctly..
I have been doing as below:
function revenueBar(localDataJson) {
        var w = 400;
        var h = 400;
        var barPadding = 1;
        var maxRevenue = 0;
        var maxTurnOver = 0;
        var padding = {
            left: 45, right: 10,
            top: 40, bottom: 60
        }

        var maxWidth = w - padding.left - padding.right;
        var maxHeight = h - padding.top - padding.bottom;
        for (var j = 0; j < localDataJson.length; j++) {
            if (localDataJson[j].Revenue > maxRevenue) {
                maxRevenue = localDataJson[j].Revenue;
            }

        }
        for (var j = 0; j < localDataJson.length; j++) {
            if (localDataJson[j].TurnOver > maxTurnOver) {
                maxTurnOver = localDataJson[j].TurnOver;
            }

        }
        var convert = {
            x: d3.scale.ordinal(),
            y: d3.scale.linear()
        };
        // Define your axis
        var axis = {
            x: d3.svg.axis().orient('bottom')
            //y: d3.svg.axis().orient('left')
        };

        // Define the conversion function for the axis points
        axis.x.scale(convert.x);
       // axis.y.scale(convert.y);

        // Define the output range of your conversion functions
        convert.y.range([maxHeight, 0]);
        convert.x.rangeRoundBands([0, maxWidth]);

        convert.x.domain(localDataJson.map(function (d) {
            return d.Country;
        })
        );
        convert.y.domain([0, maxRevenue]);
        $('#chartBar').html("");
        var svg = d3.select("#chartBar")
                   .append("svg")
                   .attr("width", w)
                   .attr("height", h);
        // The group node that will contain all the other nodes
        // that render your chart
        $('.bar-group').html("");
        var chart = svg.append('g')
                             .attr({
                                 class: 'container',
                                 transform: function (d, i) {
                                     return 'translate(' + padding.left + ',' + padding.top + ')';
                                 }
                             });

        chart.append('g') // Container for the axis
                    .attr({
                        class: 'x axis',
                        transform: 'translate(0,' + maxHeight + ')'
                    })
                   .call(axis.x)
                    .selectAll("text")
                                 .attr("x", "-.8em")
                                 .attr("y", ".15em")
                         .style("text-anchor", "end")
                                .attr("transform", "rotate(-65)");// Insert an axis inside this node
        $('.axis path').css("fill", "none");
        chart.append('g') // Container for the axis
           // .attr({
           //     class: 'y axis',
           //     height: maxHeight,

           // })
           //.call(axis.y);

        var bars = chart
             .selectAll('g.bar-group')
             .data(localDataJson)
             .enter()
             .append('g') // Container for the each bar
             .attr({
                 transform: function (d, i) {
                     return 'translate(' + convert.x(d.Country) + ', 1)';
                 },
                 class: 'bar-group'
             });

        var color = d3.scale.ordinal()
                      .range(['#f1595f', '#79c36a', '#599ad3', '#f9a65a', '#9e66ab','#cd7058']);
        bars.append('rect')
                    .attr({
                        y: maxHeight,
                        height: 0,
                        width: function (d) { return convert.x.rangeBand(d) - 3; },
                        class: 'bar'
                    })
                    .transition()
                    .duration(1500)
                    .attr({
                        y: function (d, i) {
                            return convert.y(d.Revenue);
                        },
                        height: function (d, i) {
                            return maxHeight - convert.y(d.Revenue);
                        }
                    })
                    .attr("fill", function (d, i) {
                        return color(i);
                    })




        var svgs = svg.selectAll("g.container")
      //  svgs.selectAll("text")
          .data(localDataJson)

          .enter()
          .append("text")
            //.transition()        // <-- This is new,
          // .duration(5000)
          .text(function (d) {
              return (d.Revenue);
          })
          .attr("text-anchor", "middle")
          //// Set x position to the left edge of each bar plus half the bar width
          .attr("x", function (d, i) {
              return (i * (w / localDataJson.length)) + ((w / localDataJson.length - barPadding) / 2);
          })
         .attr({
             y: function (d, i) {
                 return convert.y(d.Revenue) +70;
             },
             height: function (d, i) {
                 return maxHeight - convert.y(d.Revenue);
             }
         })
       .attr("font-family", "sans-serif")
        .attr("font-size", "13px")
        .attr("fill", "white")


    }

My Data is:
localdatajson=[
               {"Country";"USA","Revenue":"12","TurnOver":"16"},
               {"Country";"Brazil","Revenue":"4.5","TurnOver":"16"},
               {"Country";"Belzium","Revenue":"4.8","TurnOver":"16"},
               {"Country";"Britain","Revenue":"20","TurnOver":"16"},
               {"Country";"Canada","Revenue":"6.5","TurnOver":"16"},
               {"Country";"DenMark","Revenue":"7.5","TurnOver":"16"}
             ]

The problem is text is appending but after first one i.e., it is escaping Revenue 12.and appending from second one "4.5"
Please help.

A: 
The problem is text is appending but after first one i.e., it is
  escaping Revenue 12.and appending from second one "4.5"

This is because your current block that adds the text elements has 
var svgs = svg.selectAll("g.container")
              .data(localDataJson)
              .enter()
              ...

which means that it searches for g.container elements within svg and tries to link each one to corresponding localDataJson elements (adding new ones for extra localDataJson elements for which it can't find a corresoponding g.container element). 
Since you have exactly one g.container element, it will link the first element to that and then adds new text elements for the remaining.

You want to be doing this
var svgs = svg.select("g.container").selectAll("text.label")
              .data(localDataJson)
              .enter()
              .append("text")
              .classed("label", true)
              ...

instead i.e. match text elements in g.container to the data array and add a new one for each extra one.
Notice that we use .label and added the class label - this is because we want to match it to the text elements for the data labels (not say, the ones we add for the x axis labels)

While this solves the problem, you'll probably need a few more corrections in your x and y coordinates for the labels and you don't actually need to set a width for the labels
...
.attr("x", function (d, i) {
    return convert.x(d.Country) + (convert.x.rangeBand(d) - 3) / 2;
})
.attr("y", function (d, i) {
        return maxHeight;
})
...

I set it to maxHeight just to show it works - the bar height actually goes offchart because there's something wrong with your y scale.
