d3.js Help getting Y axis dynamically labeled on simple bar chart - arrays

Question

The data is in an array of objects where the
Data = [object{name:"FIRST TECH", value:2477}];
The technology names change and I am trying to place them to the left of the bar they are associated with.
I'm not sure if I'm doing this in the best practice, but when I get the text appended to the side it is invisible. I've tried changing the class name, changing the color, z-index, position:absolute, it always remains hidden.
What do I need to do in order to get the label correctly on the side?
Code:
<style>
h2{
text-align:center;
margin-left: auto;
margin-right: auto;
}
.abcxyz{
fill:black;
color:#000;
text-anchor: end;
}
.chart {
width:800px;
display:block;
margin:auto;
background-color:#c7d9e8;
}
.chart rect {
fill: steelblue;
}
.chart rect:hover{
fill:brown;
}
.values {
fill: white;
font: 12px sans-serif;
text-anchor: end;
}
</style>
<script>
$(document).ready(function(){
var return_data;
$.ajax({
url: '<?php echo site_url('metrics/getTechDocs') ?>',
type: 'GET',
success: function(data){
data = JSON.parse(data);
set_return_data(data);
drawGraph(data);
},
error: function(data){
console.log("error");
}
});
});
function set_return_data(data){
return_data = data;
console.log (return_data);
}
function formatGraphData(data){
var newData = new Array();
for(x in data){
tmp = {name: x , value: data[x].length};
newData.push(tmp);
}
newData.sort(function(a,b){return b.value - a.value} );
return newData;
}
function drawGraph(rawData){
rawData = formatGraphData(rawData);
var width = 800,
barHeight = 30;
var x = d3.scale.linear()
.domain([0, rawData[0].value])
.range([10, width]);
var y = d3.scale.linear()
.domain(rawData.map(function(d){return d.name}))
.range([0, barHeight * rawData.length]);
var chart = d3.select(".chart")
.attr("height", barHeight * rawData.length);
var bar = chart.selectAll("g")
.data(rawData)
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
bar.append("text")
.attr("class", "abcxyz")
.attr("y", barHeight / 2 )
.text(function(d){return d.name});
bar.append("rect")
.attr("height", barHeight - 1)
.attr("width", function(d){return x(d.value);});
bar.append("text")
.attr("class", "values")
.attr("x", function(d) { return x(d.value) - 3; })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d){return d.value;});
}
</script>
<div>
<h2>Frequency of Technology Terms</h2>
<svg class="chart"></svg>
</div>

Answer 1

SVG doesn't know z-order or anything similar. The elements are displayed in the order they are added in. So to make the text appear on top of the bars, draw the bars first and then the text.