Most of the time, you'll be working within D3 objects to create and manage SVGs, but sometimes, you'll need to work directly with your page's DOM. You can use the DOM to add a tooltip that will add the values of your data on top of your bar chart.
- [Instructor] Most of the time,…you're going to be working within D3 objects…to create and manage SVG elements.…But sometimes, you'll need to work directly…with your page's dom.…Let's use the document object model…to add a tooltip that will add values to our data…on top of our bar chart elements.…So what we need to do is…create another variable.…We can do this before this chart variable right here.…And this one is going to be called tooltip.…And what we'll do here is use D3 to select…the body tag of the current page.…
And then, we're going to append.…So let's go ahead and do that here, append a div.…This will create a new div.…And then in this div, we'll modify a few attributes.…So we'll set the position to absolute.…So actually, let's do style.…And we're going to create an element…that has a little bit of padding around our text.…So this will get a padding of zero at the top and bottom,…and 10 pixels on each side.…
- What is D3.js?
- Controlling HTML within selections
- Binding data to the DOM
- Drawing SVG graphics with D3
- Using ordinal scales
- Adding events and transitions
- Working with data