From the course: D3.js Essential Training for Data Scientists
Unlock the full course today
Join today to access over 22,700 courses taught by industry experts or purchase this course individually.
Dragging and zooming - D3.js Tutorial
From the course: D3.js Essential Training for Data Scientists
Dragging and zooming
- [Instructor] I want to introduce you to a couple of other methods that D3 offers and that is zoom and drag. So I've just zoomed out all the way on Mike Bostock's Block here. Now I'm going to zoom all the way in and note that we can't go to infinity and zero in either direction on this block anyway. And I can also drag my graphic around the screen. And we're going to add some of these behaviors to our Voronoi diagram. So the first thing that we need to do is to add a chart group to our S-V-G. Well, you can call the variable anything actually, but we're adding a group to our S-V-G and the reason for that will become clear shortly. So now we just replace S-V-G with chart group like so. And I just noticed that they're logging something to the console there that we don't need. So we can take that out and save. And then if we refresh on our Voronoi diagram, it should look exactly the same as it did before. I mean, actually, the DOM will be slightly different because we're adding…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.