CODEWITHSUNDEEP
javascriptd3.jschartsbar-chart
cecelia
cecelia

Reputation: 45

d3.js bar chart: .text doesn't show up

I'm building a simple bar chart using d3.js and it works fine. However, when I try to display texts on each bar, nothing happens. The console doesn't return any error so I can't understand the problem. My code is available here, I tried to display simple text like "Hello" but still nothing shows up.

Upvotes: 1

Views: 1535

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102218

Problem:

Appending texts to a rect element in SVG.

Solution:

Append the texts to the SVG or to a group.

Instructions:

You are appending your texts to the rectangles. Nothing will show up as an error in the console because there is no error to show, but the texts won't appear.

You have to create a variable for the texts:

var texts = svg.selectAll(".mytexts")
                            .data(data)
                            .enter()
                            .append("text");

And then setting the attributes:

texts.attr("class", "value")
              .attr("x", function(d) { return widthScale(d.vacant); })
              .attr("y", heightScale.rangeBand() / 2)
              .attr("dx", -3)
              .attr("dy", ".35em")
              .attr("text-anchor", "end")
              .text(function(d) { return format(d.vacant); });

Don't forget to change the CSS accordingly.

Upvotes: 2

Related Questions