attr & style

[00:00:00]
>> So now that we have these kind of data bound on our SVG elements, what we want to do next is to be able to use them to manipulate our DOM elements. And to do that our d3 has .attr and .style. And [COUGH] all right, these will set either the attributes or CSS styles on our SVG elements.

[00:00:29]
And so here we have our five rectangles, and what we've done is we went and set the width to sorry, we just have a variable that says we want the rectangle width to be 50 pixels. And then we just set the width to the number of bars times that width, set the height of 100, still have our five rectangle elements.

[00:01:03]
And here's what we've done, you say go and get our SVG, and within that SVG container, select all of our rectangles. So here, and let's bind our array of five numbers, bind that data on to all of these rectangles. And then we're going to use our bound data, to calculate the exposition.

[00:01:28]
And I want the exposition to be the index of that rectangle, multiplied by the width, the rectangle width. We want the height to just be the data that's bound, the width to be the previously defined rectangle width of 50 pixels. Put in some shape width of 3, put in some fill color of pink, and this is how we have this.

[00:02:04]
And and actually let's talk about how this is working underneath the hood first, and so with the addr and .style, what it does is it takes a selection, and it loops through all of the elements in the selection all of the DOM elements in the selection. And it sets either the attribute or CSS style on all of those elements.

[00:02:30]
And so if value is a function, so if what we're passing in is a function like this. So if this value is a function, then what d3 does, is loops through and passes in the data that's bound, and the index of that particular, DOM element. So what we've done here is for the x and the height, we've said, loop through each of these rectangle elements.

[00:03:09]
And for the first rectangle, the data that's been bound is 45 and the index is 0, so the X will evaluate to 0, and the height is 45. For the second one, data bound is 67, index is 1, x thus is 1 times 50 is 50, height is the data so it's 67 and so on with all of the rectangles.

[00:03:31]
So that's kind of what d3 is doing for us underneath the hood, when we call attr or .style. So I wanted to take kind of just like a few minutes and maybe like five minutes to kind of just play around with each of these cells that we covered.

[00:03:55]
I knew that I went through quite quickly in terms of, console logging all of this. So I just want you to either, here instead of maybe using the bar d maybe here maybe we can find some other data if you want to pass along some different data, give it a try, like console, log different things.

[00:04:24]
And then for the attributes, try playing around with these numbers or try passing along maybe functions if you want to. And, if you want to try different presentation attributes, here's a list of the different attributes that you can set on SVG elements. So I just want us to take a few moments, to kind of play around with these cells so that you can kind of get a, hopefully more intuitive understanding of d3 selections, and how data binding is working.

[00:05:01]
And how we can use those bound data with the attributes on these DOM elements.