Cant solve this one i need help

JavaScript
1

Tell us what’s happening:

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()
     // Add your code below this line
.text()
     // Add your code above this line
</script>
<body>

Your browser information:

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

Challenge: Add Labels to D3 Elements

Link to the challenge:

2

what have you tried? it seems you just used a text method. What about the where and what should be written in there?
You can look at how the rect elements were added above. It is not exactly the same as you are creating text nodes now, but it is mostly similar.

Below the instructions as a refresher

The code in the editor already binds the data to each new text element. First, append text nodes to the svg . Next, add attributes for the x and y coordinates. They should be calculated the same way as the rect ones, except the y value for the text should make the label sit 3 units higher than the bar. Finally, use the D3 text() method to set the label equal to the data point value.

1 Like