Why doesn't setting the .style apply the same style to all of the divs?

JavaScript
1

So my code works just fine and passes the tests. However, I’m struggling to get my head around why setting the style on each div doesn’t result in all of them being the same. If you’re changing the style for each of the divs then how come they don’t all end up being the same height as the last value in the dataset? If they all have the same class of “bar”, then how come they don’t all become 9px in height if 9 is the last element in the array when the class should be applied to them all, if you see where I’m coming from.

Tell us what’s happening:

  **Your code so far**


<style>
.bar {
  width: 25px;
  height: 100px;
  display: inline-block;
  background-color: blue;
}
</style>
<body>
<script>
  const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

  d3.select("body").selectAll("div")
    .data(dataset)
    .enter()
    .append("div")
    .attr("class", "bar")
    // Add your code below this line
    .style("height", (h) => h + "px")


    // Add your code above this line
</script>
</body>

  **Your browser information:**

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

Challenge: Update the Height of an Element Dynamically

Link to the challenge:

2

Using a callback function in the style() method sets height equal to the data value.

The style() method in D3 accepts a callback function to dynamically set that attribute. The callback function takes two arguments, one for the data point itself (usually d ) and one for the index of the data point in the array. The second argument for the index is optional.

Take a look at the previous challenge: dynamically-set-the-coordinates-for-each-bar

3

I understand that it works this way but I just can’t see why they don’t all end up the same height when they all have the same class - it might just be something I have to accept. You’d kind of assume that once all the data points in the set had been looped through that they’d end up all being the same once the last in the loop had set the class in the CSS to the last value.

4

The height that is specified in the class is then overwritten when you use style method. Here’s my very artistic illustration of how it works:

Capture
Capture1370×451 45.3 KB

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.