Add Text On Top Of Bar In D3js Chart -- No Elements Added

I am creating a bar chart with d3.js from data stored in tsv file. I want to insert a text in each bar. How I can do? I have tried even this solution, but doesn't work. Here is the

Solution 1:

AmeliaBR is right as usual, and I am only putting this answer because while I was working on it, I saw myself changing the code so that it really makes use of the Enter, Update, Exit selection paradigm. I have made quite a few changes in that regard. Here is the code, FWIW:

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var formatPercent = d3.format(".0%");

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1, 1);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

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 + ")");

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

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")
    .text("weight");

var g = svg.append("g");

functionupdate(file){
d3.tsv(file, function(error, data) {

data.forEach(function(d) {
    d.weight = +d.weight;
});

x.domain(data.map(function(d) { return d.concept; }));
y.domain([0, d3.max(data, function(d) { return d.weight; })]);

var bar = g.selectAll(".bar")
    .data(data);

bar.enter()
  .append("rect")
    .attr("class","bar");

bar
    .style("fill", function (d){return d.color;})
    .attr("class", "bar")
    .attr("x", function(d) { returnx(d.concept); })
    .attr("width", x.rangeBand())
    .attr("y", function(d) { returny(d.weight); })
    .attr("height", function(d) { return height - y(d.weight); });

bar.exit().remove();

var text = g.selectAll(".text")
    .data(data);

text.enter()
  .append("text")
    .attr("class","text");

text
    .attr("text-anchor", "right")
    .attr("x", function(d) { returnx(d.concept); })
    .attr("y", function(d) { returny(d.weight) + 22;})
    .attr("font-family", "sans-serif") 
    .attr("font-size", "11px")
    .attr("fill", "white")
    .text(function(d) {
    return d.concept;
});

text.exit().remove();
});
}

And you call it like by doing update("data16.tsv") and then update("data15.tsv").

Solution 2:

When you draw an axis, it creates separate <text> elements for each label inside the axis group inside the SVG. So if you then try to select all the <text> elements in the SVG, you're going to select all your axis labels. If you have more axis labels than data for text elements, your enter() selection will be empty and nothing will happen.

To be sure you're only selecting the correct <text> elements, give your text labels a class to distinguish them from the axis labels. And then use that class to narrow-down your selector:

svg.selectAll("text.bar-label")
   .data(data)
   .enter()
   .append("text")
   .attr("class", "bar-label")