Dynamically Set the Coordinates for Each Bar

Dynamically Set the Coordinates for Each Bar
0

#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


#2

Do you have a specific question about the challenge?

FYI - The instructions state:

Change the x attribute callback function so it returns the index times 30.

Your code does not return anything but resets i to 0 and adds 30 each time.

It should be returning the value of the index times (multiplied) by 30.


#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”