From the course: D3.js Essential Training for Data Scientists
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Adding interactivity with JavaScript - D3.js Tutorial
From the course: D3.js Essential Training for Data Scientists
Adding interactivity with JavaScript
- [Instructor] With JavaScript you can get really creative. We're going to start by recreating the hover function using JavaScript. So you can delete the hover statement from your CSS. Then scroll down. Now find the bit of code that adds the polygons. What you want to do is add a .on statement at the end there. The first parameter is the event that you're listening for. We're going to say mousemove. And then in the second one we enter a function to dell D3 what to do. Now what you could do here is call a function, but because the line of code we're going to write is really small we're just going to write it straight in here. this.style.fill is red. And if we refresh that we certainly do have a red fill going on there. But as you can see, it's not disappearing when we mouse out and for that we would need to add another action there which is mouseout. And this time we put the fill back to white which is what it was originally. Now notice a couple of things here about this setup. We…
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.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.