Dynamically Set the Coordinates for Each Bar

HTML-CSS
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) => {
         // Add your code below this line
         
         i = 0;
         i += 30;
         
         
         // Add your code above this line
       })
       .attr("y", 0)
       .attr("width", 25)
       .attr("height", 100);
  </script>
</body>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar

1 Like
3

Ha i eventually got it. But i still don’t understand how multiplying the index variable is adding 30 :\

4

The idea is that you can make it like adding 30 every time or simply multiplying 30 for the index every time you cross the loop. So, at the end,starting with “i=0”, “i+=30” or “i*30” gives you the same result, but don´t forget to “return” the value of “i”

2 Likes