Stack Overflow: 19639779

HTML

<div id="chart"></div>

CSS

body {
    font: 10px sans-serif;
    margin: 0;
}
path.line {
    fill: none;
    stroke: #53aee2;
    stroke-width: 3;
}
path.area {
    fill: #cfddf0;
}
.axis {
    shape-rendering: crispEdges;
}
.x.axis path {
    display: none;
}
.y.axis path, .y.axis line {
    fill: none;
    stroke: #000000;
    stroke-width: 1px;
    stroke-opacity: 0.06;
}
text {
    stroke: none;
    fill: #bbbbbb;
    font-family:"HelveticaNeue", Helvetica, Arial, sans-serif;
    font-size:10px;
}
text.data-label { 
    text-align: center;
}

JavaScript

var element_id = '#chart';
var em = 16;

var dataset = [{val:44},{val:98},{val:75},{val:33},{val:5}];

var padding = 2 * em;
var outerWidth = 500,
    outerHeight = 250;
var width = outerWidth - 2 * padding,
    height = outerHeight - 2 * padding;

var svg = d3.select(element_id).append('svg')
                .attr({width: outerWidth, height: outerHeight})
                .append('g')
                .attr('transform', 'translate('+padding+','+padding+')');

var x = d3.scale.ordinal().domain(d3.range(dataset.length)).rangeRoundBands([0, width],.05);
var y = d3.scale.linear().domain([0, d3.max(dataset, function(d){ return d.val; })]).range([height, 0]);

var xAxis = d3.svg.axis().scale(x).orient('bottom');
var yAxis = d3.svg.axis().scale(y).orient('left');

svg.append('g').classed('x axis',true).call(xAxis).attr('transform','translate(0,'+height+')');
svg.append('g').classed('y axis',true).call(yAxis);

svg.selectAll('text.data-label')
.data(dataset)
.enter()
.append('text')
.classed('data-label',true)
.text(function(d){ return d.val; })
.attr('y','30')
.attr('x', function(d, i){
    var labelWidth = this.getBoundingClientRect().width;
    var labelHeight = this.getBoundingClientRect().height;
    d.width = labelWidth;
    d.height = labelHeight;
    return x(i)+x.rangeBand()/2-labelWidth/2;
});

d3.select('body').selectAll('p').data(dataset).enter().append('p').text(function(d,i){
    return i+": { width: "+d.width+", height: "+d.height+", val: "+d.val+"}";
});

svg.selectAll('text.data-label').each(function(d, i){
    var height = this.getBoundingClientRect().height;
    var width = this.getBoundingClientRect().width;
    console.log(i+': ('+width+','+height+')');
    this.setAttribute('data-width', width);
  //  console.log(this);
});