D3 doesn't append text labels to svg

JavaScript
1

Hi, everyone! I got stuck with this simple D3 project . Please, help.
I am using a hard-coded dataset to draw a bar chart, and everything works fine. But there are no text labels on my chart. There are No errors in the console, no text - tags at all in the final html.

Here is my codepen for the project:
Bar chart

**let svg = d3.select(‘section’)
.append(“svg”)
.attr(“width”, width)
.attr(“height”, height);

const xAxis = d3.axisBottom(xScale);
svg.append(“g”)
.attr(“transform”, “translate(0,” + (height - padding) + “)”)
.call(xAxis);

const yAxis = d3.axisLeft(yScale);
svg.append(“g”)
.attr(“transform”, “translate(” + padding + “, 0)”)
.call(yAxis);

svg.selectAll(‘rect’)
.data(dataset)
.enter()
.append(‘rect’)
.attr(“x”, (d, i) => xScale(i * padding))
.attr(“y”, (d, i) =>height - yScale( d[1]) - padding)
.attr(“width”, 25)
.attr(“height”, (d, i) => yScale(d[1]))
.attr(“fill”, “navy”);

svg.selectAll(“text”)
.data(dataset)
.enter()
.append(“text”)
.text((d) => d[0])
.attr(“x”, (d, i) => xScale(i * padding))
.attr(“y”, (d, i) =>400)
.attr(‘fill’, ‘black’);**

Chrome latest

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.122 Safari/537.36.

Challenge: Visualize Data with a Bar Chart

Link to the challenge:

2

I’ve been fighting with d3 a bit myself, and while I haven’t yet found a solution to the problem you posted for, I did find another issue that I thought you might like to have addressed. Right now, the heights of all your bars are way different than the values associated with them. Your first value is 390, but it’s the smallest bar. The next is 303, but it’s taller than the 390. The next value is still smaller, and the bar is still larger. This is because we have to calculate the y scale “backwards” so our y axis renders with the biggest numbers at the top. When we do this, it skews all of our y scale calculations, making small numbers big and big numbers small. To get around this, you have to take the “minimum” value from the y scale, (which is actually the biggest number), and subtract our y scaled value from it to get the value on the chart that we actually want. This all sounds confusing, so here’s what I did to correct the problem in your codepen:

let rect = svg
  .selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("x", (d, i) => xScale(i * padding))
  .attr("y", (d, i) => yScale(d[1]))
  .attr("width", 25)
  .attr("height", (d, i) => yScale(0) - yScale(d[1]))
  .attr("fill", "navy");

Notice that the height is now yScale(0) - yScale(d[1]), the “minimum”, (but actually largest), yScale value minus the yScale value from your data. Now all your values render correctly on the chart. When you do this, you no longer have to account for height and padding when calculating your y attribute, so you’ll see that’s now just the yScale value from your data.

Can’t for the life of me figure out why your text won’t render, though.

3

And I still can’t figure out why the text wouldn’t append for you originally, but I have figured out how to fix it. There’s something about svg.selectAll('text') that it doesn’t like. According to the freecodecamp lesson on the subject, we append more elements when selectAll doesn’t have enough to assign all the values in our data set. So maybe it thinks it has enough text elements without making any more? This is all speculation. Like I said, I don’t really know why it doesn’t work just as you have it written. But to make it work, you just have to give some other element to selectAll besides text, one that you know doesn’t already exist. I was able to substitute svg.selectAll(".myText"), and your text elements all render just fine.
Good luck with your d3 stuff!

Edit: I think I’ve cracked it! The labels on the axes are text elements. I have a chart with 50 or so bars on it. When I try to add labels with svg.selectAll("text"), it skips the first 20 elements and adds labels to all the rest. There are exactly 20 labels on my axes. God have mercy on our souls.

1 Like
4

Great job!! Unbeleivable that i have already got the reply! I didn’t expect any for sure. Thank you a lot LuosRestil!