Tell us what’s happening:
Describe your issue in detail here.
I don´t understand why by multiplying index by 3, I´m adding space between each bar. Am I multipliying 0, 1, 2, 3, 4, 5, 6, 7, 8 by 3? The space between them is the same, is not 0, 30, 60, etc. I have the feeling that I am adding 5 to the 25 width of the rectangle, but I cannot find out how.
And another thing, when “d” means “data point”, does it refer to the values inside “const dataset” (12, 31, 22)?
**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
return 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36
Challenge: Dynamically Set the Coordinates for Each Bar
Link to the challenge: