From the course: D3.js Essential Training for Data Scientists

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Setting attributes for shapes

Setting attributes for shapes - D3.js Tutorial

From the course: D3.js Essential Training for Data Scientists

Start my 1-month free trial

Setting attributes for shapes

“

- [Instructor] All SVG elements, such as rectangles and circles, require a basic set of attributes. These differ by element. A circle, for example, must have x y coordinates and a radius or it simply will not appear on the page. For a rectangle, we need x, y, width and height as a minimum. We could also use rx and ry for rounded corners but we're not gonna use that now. Those attributes are optional. Let's add some mandatory attributes to our rectangles here. Delete the semi-colon and then dot attr for attribute. And the first parameter tells the three what we want to change. And the second parameter changes it to a value. And I'm gonna copy that and paste it four times because I've got four attributes. Then we're gonna have height, width, x and y as our attributes. For the rectangles, let's give them a height of 200. And the browser, incidentally, will assume we mean pixels. And give it a width of 50, x value of 20, and y value of 100. Save that. Go to Firefox and there we have a…

Contents