d3.js条形图：.text不显示

Question

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.

Answer 1

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.