1.3 KiB
title
| title |
|---|
| Add Document Elements with D3 |
Add Document Elements with D3
This challenge introduces three core methods of d3.js:
- The
d3.select()method - The
d3.append()method - The
d3.text()method
The select() Method
The select method is crucial, because it tells the browser where to put any d3.js code written afterwords. In Javascript, you would write document.getElementById('#myId');. In d3.js, you would write d3.select('#myId').
The append() method
The append method is similar to jsx in react, markup in html or the appendChild() method in Javascript. For Example, writing d3.select('#myId').append('p') would be the same as writing ...<p></p>...
The text() method
The text method is the third step in applying content to a page using d3.js. We have selected an element in our html and added an element. Now, we need to fill the empty element. We do that like this: d3.select('#myId').append('p').text('sup World!'). This is akin to writing ...<p>'sup World!</p>... in html.
The Solution
Add the folowing code to your editor:
d3.select('body')
.append('h1')
.text('Learning D3');