From the course: D3.js Essential Training

Unlock this course with a free trial

Join today to access over 25,500 courses taught by industry experts.

Seeing the code how the browser sees it

Seeing the code how the browser sees it - D3.js Tutorial

From the course: D3.js Essential Training

Start my 1-month free trial Buy for my team

Seeing the code how the browser sees it

“

- [Narrator] Sit back and relax. You've done some hard conceptual grasping if you've been watching up till now, and now we're going to consolidate that with a bit of revision. You can put your pen down or your keyboard away for this video. I'm going to show you how the select statement lets you compare your data to existing elements in the SVG line by line. First, we declare the dataArray as an array of length three. Next we use our svg element, which has already been appended to our HTML, and we select all of the rectangles on the page. Let's see in reality what that is. So svg.selectall("rect") gives us this object with two properties, _groups and _parents. So the parent element is svg, which is good. That makes sense. And groups is a NodeList of length zero, and that's another way of saying it didn't find any rectangles. So next up we ask D3 to bind the data to the rectangles. And of course there aren't any, so it's not going to be super exciting. But now in addition to groups and…

Contents