Added D3 solution (#19097)
* client/src/guide/english/certifications/data-visualization/data-visualization-with-d3/work-with-data-in-d3/index.md * client/src/guide/english/certifications/data-visualization/data-visualization-with-d3/add-document-elements-with-d3/index.md
This commit is contained in:
committed by
Randell Dawson
parent
5f566b20ae
commit
f3deb645ed
@ -3,8 +3,24 @@ title: Add Document Elements with D3
|
|||||||
---
|
---
|
||||||
## Add Document Elements with D3
|
## Add Document Elements with D3
|
||||||
|
|
||||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/data-visualization/data-visualization-with-d3/add-document-elements-with-d3/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
### Hint 1
|
||||||
|
|
||||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
Use the ``` .select() ``` method.
|
||||||
|
|
||||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
### Hint 2
|
||||||
|
Target ``` body ```.
|
||||||
|
|
||||||
|
### Hint 3
|
||||||
|
Use the ``` .append() ``` method.
|
||||||
|
|
||||||
|
### Hint 4
|
||||||
|
Use the ``` .text() ``` method.
|
||||||
|
### Solution Ahead
|
||||||
|
### Solution
|
||||||
|
```javascript
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
d3.select("body").append("h1").text("Learning D3");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
```
|
@ -3,8 +3,22 @@ title: Work with Data in D3
|
|||||||
---
|
---
|
||||||
## Work with Data in D3
|
## Work with Data in D3
|
||||||
|
|
||||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/data-visualization/data-visualization-with-d3/work-with-data-in-d3/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
### Hint 1
|
||||||
|
|
||||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
Use the ``` selectAll ``` method.
|
||||||
|
|
||||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
### Hint 2
|
||||||
|
|
||||||
|
Use the ``` .data() ``` method.
|
||||||
|
|
||||||
|
### Spoiler Alert | Solution Ahead
|
||||||
|
### Solution
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||||
|
d3.select("body").selectAll("h2").data(dataset).enter().append("h2").text("New Title");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
```
|
Reference in New Issue
Block a user