title: Display text at the top of bar and change x axis text color in d3
body: <p>I have a d3 bar chart which will display tooltip on hover. Now I need an extra functionality to display the value text on top of the bar and change the x-axis label color when a bar is clicked. Any idea why it's not getting displayed? And how to change x-axis label color for that particular bar? </p>
  
  <pre><code>var width = 400, height = 350;
      var margin = {top: 90, right: 20, bottom: 30, left: 80};
  
      //data
      var data = [ {"month":"JAN","patients":120}, {"month":"FEB","patients":50}, {"month":"MAR","patients":80}, {"month":"APR","patients":20}, {"month":"MAY","patients":100}, {"month":"JUN","patients":350}];
  
      //x and y Scales
      var xScale = d3.scale.ordinal()
      .rangeRoundBands([0, width], .1);
  
      var yScale = d3.scale.linear()
      .range([height, 0]);
  
      xScale.domain(data.map(function(d) { return d.month; }));
      yScale.domain([0, d3.max(data, function(d) { return d.patients; })]);
  
      //x and y Axes
      var xAxis = d3.svg.axis()
      .scale(xScale)
      .orient("bottom")
      .outerTickSize(0);
  
      var yAxis = d3.svg.axis()
      .scale(yScale)
      .orient("left");
  
  
      var tip = d3.tip()
      .attr('class', 'd3-tip')
      .offset([-10, 0])
      .html(function(d) {
          return "&lt;span class='tooltip-line'&gt;One: " + d.patients + "&lt;/span&gt;&lt;span&gt;Two: " + d.patients + "&lt;/span&gt;";
      });
  
      //create svg container
      var svg = d3.select('body')
      .append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");        
  
      // tooltip
      svg.call(tip);
  
      // Horizontal grid
      svg.append("g")         
      .attr("class", "grid horizontal")
      .call(d3.svg.axis().scale(yScale)
            .orient("left")
            .tickSize(-(height + margin.top + margin.bottom - 70), 0, 0)
            .tickFormat("")
            );
  
      //create bars
      svg.selectAll(".bar")
      .data(data)
      .enter()
      .append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return xScale(d.month); })
      .attr("width", xScale.rangeBand())
      .attr("y", function(d) { return yScale(d.patients); })
      .attr("height", function(d) { return height - yScale(d.patients); })
      .on("click", function(d) {
          // add text on top of bar
          d3.select(this).append("text")
            .attr("x",  xScale.rangeBand() / 2 )
            .attr("y", function(d) { return yScale(d.patients) + 5 ; })
            .attr("dy", "1em")
            .attr("text-anchor", "middle")
            .attr("font-size", "14px")
            .attr("fill", "orange")
            .attr("transform", function(d) { return "translate(0, -20)"; })
            .text(function(d) { return d.patients; });
      })
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide)
  
  
      //drawing the x axis on svg
      svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);
  
      //drawing the y axis on svg
      svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end");
  
      svg.selectAll(".tick")
      .filter(function (d) { return d === 0;     
      }).remove();
  </code></pre>
  
  <p><a href="http://jsfiddle.net/7E2L5/7/" rel="nofollow noreferrer">JSFiddle</a></p>