How can i make count to be displayed permanently at the end of graph bars?
<p>I have working fiddle of this code here. I am trying my hands on d3. To display the count right now i am using tooltips. So it displays value on mouseover . How can i append text to the bars, so that the count is displayed permanently ,independent of any mouse event.</p>

<p><a href="https://jsfiddle.net/rBfy5/2174/" rel="nofollow">Here is the working fiddle</a></p>

<pre><code> rects = groups.selectAll('rect')
    .data(function (d) {
    return d;
})
    .enter()
    .append('rect')
    .attr('x', function (d) {
    return xScale(d.x0);
})
    .attr('y', function (d, i) {
    return yScale(d.y);
})
    .attr('height', function (d) {
    return yScale.rangeBand();
})
    .attr('width', function (d) {
    return xScale(d.x);
})
        .attr('class', function (d) {
    if(d.month == 'Open/New'){
        return 'hm-statusNew';
    }else if(d.month == 'In Progress'){
        return 'hm-inProgress';
    }else{
        return 'hm-completed';
    }
})
    .on('mouseover', function (d) {
    var xPos = parseFloat(d3.select(this).attr('x')) / 2 + width / 2;
    var yPos = parseFloat(d3.select(this).attr('y')) + yScale.rangeBand() / 2;

    d3.select('#tooltip')
        .style('left', xPos + 'px')
        .style('top', yPos + 'px')
        .select('#value')
        .text(d.x);

    d3.select('#tooltip').classed('hidden', false);
})
    .on('mouseout', function () {
    d3.select('#tooltip').classed('hidden', true);
})
</code></pre>