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

Unlock the full course today

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

Dragging and zooming

Dragging and zooming - D3.js Tutorial

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

Start my 1-month free trial

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…

Contents