59 lines
3.2 KiB
Markdown
59 lines
3.2 KiB
Markdown
|
---
|
|||
|
|
title: Work with Data in D3
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
 Remember to use <a>**`Read-Search-Ask`**</a> if you get stuck. Try to pair program  and write your own code 
|
|||
|
|
|
|||
|
|
### Problem Explanation:
|
|||
|
|
We need to make `h2` element as much as the number of values in `dataset` with a text `New Title`, using the `data()`, `enter()` functions.
|
|||
|
|
|
|||
|
|
##  Hint: 1
|
|||
|
|
|
|||
|
|
* You will need to select the `body` node, then select all `h2` elements.
|
|||
|
|
|
|||
|
|
> _try to solve the problem now_
|
|||
|
|
|
|||
|
|
##  Hint: 2
|
|||
|
|
|
|||
|
|
* You will need to D3 create and append an h2tag using `append()` for each item in the datasetarray using `data()` and `enter()`.
|
|||
|
|
|
|||
|
|
> _try to solve the problem now_
|
|||
|
|
|
|||
|
|
##  Hint: 3
|
|||
|
|
|
|||
|
|
* The text in the `h2` should say `New Title` by `text()` function.
|
|||
|
|
|
|||
|
|
> _try to solve the problem now_
|
|||
|
|
|
|||
|
|
## Spoiler Alert!
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
**Solution ahead!**
|
|||
|
|
|
|||
|
|
##  Basic Code Solution:
|
|||
|
|
```javascript
|
|||
|
|
<body>
|
|||
|
|
<script>
|
|||
|
|
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
|||
|
|
|
|||
|
|
// Add your code below this line
|
|||
|
|
d3.select("body").selectAll("h2")
|
|||
|
|
.data(dataset)
|
|||
|
|
.enter()
|
|||
|
|
.append("h2")
|
|||
|
|
.text("New Title");
|
|||
|
|
// Add your code above this line
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
##  NOTES FOR CONTRIBUTIONS:
|
|||
|
|
|
|||
|
|
*  **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 <20> **Basic**, **Intermediate** and **Advanced**. 
|
|||
|
|
* Please add your username only if you have added any **relevant main contents**. ( **_DO NOT_** _remove any existing usernames_)
|
|||
|
|
|
|||
|
|
> See  <a href='http://forum.freecodecamp.com/t/algorithm-article-template/14272' target='_blank' rel='nofollow'>**`Wiki Challenge Solution Template`**</a> for reference.
|