gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

guide solution for Add Document Elements with D3 (#27095)

Browse Source 
Added solution to the Add Document Elements with D3 stub
This commit is contained in:
Bannon Tanner
2019-03-21 13:01:49 -05:00
committed by The Coding Aviator
parent aa96818850
commit 01de9ca6f6
1 changed files with 60 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
guide/english/certifications/data-visualization/data-visualization-with-d3/add-document-elements-with-d3/index.md
View File

@@ -2,25 +2,69 @@
title: Add Document Elements with D3 title: Add Document Elements with D3
--- ---
## Add Document Elements with D3 ## Add Document Elements with D3
![:triangular_flag_on_post:](https://forum.freecodecamp.com/images/emoji/emoji_one/triangular_flag_on_post.png?v=3 ":triangular_flag_on_post:") Remember to use <a>**`Read-Search-Ask`**</a> if you get stuck. Try to pair program ![:busts_in_silhouette:](https://forum.freecodecamp.com/images/emoji/emoji_one/busts_in_silhouette.png?v=3 ":busts_in_silhouette:") and write your own code ![:pencil:](https://forum.freecodecamp.com/images/emoji/emoji_one/pencil.png?v=3 ":pencil:")
[This challenge](https://learn.freecodecamp.org/data-visualization/data-visualization-with-d3/add-document-elements-with-d3) introduces three core methods of **d3.js**: ### Problem Explanation:
* The `d3.select()` method
* The `d3.append()` method
* The `d3.text()` method
### The select() Method This challenge can be completed by referring to the example in the description and modifying the parameters to those that are in the instructions.
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 #### Relevant Links
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 From the official D3 Documentation:
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. * [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)
### The Solution ## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 1
Add the folowing code to your editor:
``` * You will need to use `d3` to reference the D3 object and chain your methods
d3.select('body')
> _try to solve the problem now_
## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 2
* 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.
> _try to solve the problem now_
## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 3
* 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'.
> _try to solve the problem now_
## Spoiler Alert!
**Solution ahead!**
## ![:beginner:](https://forum.freecodecamp.com/images/emoji/emoji_one/beginner.png?v=3 ":beginner:") Basic Code Solution:
```javascript
<body>
<script>
d3.select('body')
.append('h1') .append('h1')
.text('Learning D3'); .text('Learning D3');
</script>
</body>
``` ```
# Code Explanation:
* `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
## ![:clipboard:](https://forum.freecodecamp.com/images/emoji/emoji_one/clipboard.png?v=3 ":clipboard:") NOTES FOR CONTRIBUTIONS:
* ![:warning:](https://forum.freecodecamp.com/images/emoji/emoji_one/warning.png?v=3 ":warning:") **DO NOT** add solutions that are similar to any existing solutions. If you think it is **_similar but better_**, then try to merge (or replace) the existing similar solution.
* Add an explanation of your solution.
* Categorize the solution in one of the following categories — **Basic**, **Intermediate** and **Advanced**. ![:traffic_light:](https://forum.freecodecamp.com/images/emoji/emoji_one/traffic_light.png?v=3 ":traffic_light:")
* Please add your username only if you have added any **relevant main contents**. (![:warning:](https://forum.freecodecamp.com/images/emoji/emoji_one/warning.png?v=3 ":warning:") **_DO NOT_** _remove any existing usernames_)
> See ![:point_right:](https://forum.freecodecamp.com/images/emoji/emoji_one/point_right.png?v=3 ":point_right:") <a href='http://forum.freecodecamp.com/t/algorithm-article-template/14272' target='_blank' rel='nofollow'>**`Wiki Challenge Solution Template`**</a> for reference.