This course has been updated! We now recommend you take the Introduction to D3.js course.
Transcript from the "Selection and Data Demo Q&A" Lesson
[00:00:00]
>> Speaker 1: Is stroke with a part of the total width of the rectangle which is 100 or is there more space needed for the stroke width?
>> Shirley Wu: Man, so stroke width is essentially a, I don't have the technical terms for this but it's essentially centered so if you have a hundred pixels.
[00:00:22] My guess, because I don't have confirmation on this, is it will actually be, if you have a, say, two pixel stroke width, it should go 102. Anybody can correct me on this. And then it actually gets centered around the rectangle such that like there's one pixel that goes into the rectangle and then one pixel that goes out of that rectangle.
[00:00:49] I wanted to do two things, the first is I realize, so I should actually kind of console off things with you and so that you can see how to do it.
>> Shirley Wu: So, this is basically all you are gonna do.
>> Shirley Wu: And then if you are much more used to the non ES6, all you have to do is
[00:01:21]
>> Shirley Wu: I think it was height minus d.
>> Shirley Wu: So if you do the non ES6 function call, make sure that you are returning a value every single time, or else D3 won't know what the value is to apply to the attribute of that element. So yeah, so you can be like, this is what's returning for the y attribute for each single one of them.
[00:01:58] So that's the first thing I wanted to make sure to do. So you can console that log like this. And then the second thing I wanted to mention is with SVG I think like a lot of the rendering system, the coordinate system for X and Y goes from the top of the screen.
[00:02:19] Left to right, it goes zero and increases for x, and for y it goes zero and increases as it goes down the screen. Which is why you might have noticed,
>> Shirley Wu: That there's something kind of weird going on here where why I actually returned height minus the data.
[00:02:45] And that is because if I don't do that,
>> Shirley Wu: So if I just return D, well first off that happens.
>> Shirley Wu: Yeah actually that happens.
>> Speaker 1: You [INAUDIBLE], right?
>> Shirley Wu: Wait, no, [CROSSTALK] no, no. Sorry if I don't set the y. That was the point I was trying to make.
[00:03:10] Yeah, thank you very much. If I don't set the y I'm It will actually be outside down because it's just saying okay I go in 0 0 and then have the height. And so if we don't want upside down bar graphs we have to make to sure to first do the height.
[00:03:30] And then subtract the data from it and then yeah this is the like one thing to keep in mind when doing like rectangles and staff with SVG. For using likes and actually anything for the constant system and SVG.