Add Labels to D3 Elements

Tell us what’s happening:

I am just confused as to why nothing is showing up at all to start manipulating it I deffinatley have this formula wrong

Your code so far


<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
    
    const w = 500;
    const h = 100;
    
    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);
    
    svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("x", (d, i) => i * 30)
       .attr("y", (d, i) => h - 3 * d)
       .attr("width", 25)
       .attr("height", (d, i) => 3 * d)
       .attr("fill", "navy");
    
    svg.selectAll("text")
      .data("dataset")
      .enter()
      .append("text")
       // Add your code below this line
      .attr("x", (d, i) => i * 30)
       .attr("y", (d) => i + 3)
      .attr("fill", "red")
      .text(d)
       
     
       
       // Add your code above this line
  </script>
<body>

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/data-visualization/data-visualization-with-d3/add-labels-to-d3-elements

Some things to note in the selectAll part for the text:

  • You typed "dataset". You might have meant dataset (without the quotes).
  • In .attr("y", you used an i variable but you forgot to include it in the parameter list.
  • In .text(), d is just a plain variable that’s not declared anywhere. If you intend to display the current data point, use d => d.

The above won’t be enough to pass the exercise. You need to use the right formula for the text’s y attribute. It should be detailed in the instructions.

1 Like

try this

       .attr("x",(d)=>d*30)
       .attr("y",(d)=>h-3*d-3)
       .text((d)=>d)
4 Likes

I see your code suggestion would all you pass the test (for reasons I’m not sure of), but this does not place each data value in the array (dataset) exactly above the bar. This can be traced to the “x” attribute callback having the data values instead of the index determining its position.

[spoiler].attr("x",(d, i)=> i*30)[/spoiler]
1 Like

This solution worked for me.Thanks