2018-10-04 14:47:55 +01:00
---
title: Add Document Elements with D3
---
2019-07-24 00:59:27 -07:00
# Add Document Elements with D3
2018-10-04 14:47:55 +01:00
2019-07-24 00:59:27 -07:00
---
## Problem Explanation
2018-10-04 14:47:55 +01:00
2019-03-21 13:01:49 -05:00
This challenge can be completed by referring to the example in the description and modifying the parameters to those that are in the instructions.
2018-10-04 14:47:55 +01:00
2019-03-21 13:01:49 -05:00
#### Relevant Links
2019-03-21 11:58:47 -04:00
2019-03-21 13:01:49 -05:00
From the official D3 Documentation:
* [Select ](https://github.com/d3/d3-selection/blob/master/README.md#select )
* [Append ](https://github.com/d3/d3-selection/blob/master/README.md#selection_append )
* [Text ](https://github.com/d3/d3-selection/blob/master/README.md#selection_text )
2019-03-21 11:58:47 -04:00
2019-07-24 00:59:27 -07:00
---
## Hints
### Hint 1
2019-03-21 13:01:49 -05:00
* You will need to use `d3` to reference the D3 object and chain your methods
2019-07-24 00:59:27 -07:00
### Hint 2
2019-03-21 13:01:49 -05:00
* To chain methods together, simply start the next one directly after the previous one has ended. The example shows this on separate lines to improve readability. Make sure not to put a semicolon after any of the methods or the code will break.
2019-07-24 00:59:27 -07:00
### Hint 3
2019-03-21 13:01:49 -05:00
* The example shows exactly what is needed, all that needs to be changed are the parameters. E.g. replace 'ul' in the `select` method with 'body'.
2019-07-24 00:59:27 -07:00
< details > < summary > Solution 1 (Click to Show/Hide)< / summary >
2019-03-21 13:01:49 -05:00
```javascript
< body >
< script >
d3.select('body')
.append('h1')
.text('Learning D3');
< / script >
< / body >
2019-03-21 11:58:47 -04:00
```
2019-03-21 13:01:49 -05:00
2019-07-24 00:59:27 -07:00
#### Code Explanation
2019-03-21 13:01:49 -05:00
* `d3` targets the D3 object
* `.select('body')` uses the D3 `select` method to target the `body` HTML node
* `.append('h1')` uses the D3 `append` method to "append" or attach an `h1` element to the `body` element
* `.text('Learning D3')` uses the D3 `text` method to change the text of the `h1` element to 'Learning D3'
* The semicolon ends the method chain, but is not required
* Note that the methods are on separate lines for improved readability, as d3 method chains can get quite lengthy
2019-07-24 00:59:27 -07:00
< / details >
2019-03-21 13:01:49 -05:00
