3.4 KiB
3.4 KiB
title
| title |
|---|
| Add Document Elements with D3 |
Add Document Elements with D3
Remember to use Read-Search-Ask if you get stuck. Try to pair program
and write your own code 
Problem Explanation:
This challenge can be completed by referring to the example in the description and modifying the parameters to those that are in the instructions.
Relevant Links
From the official D3 Documentation:
Hint: 1
- You will need to use
d3to reference the D3 object and chain your methods
try to solve the problem now
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
Hint: 3
- The example shows exactly what is needed, all that needs to be changed are the parameters. E.g. replace 'ul' in the
selectmethod with 'body'.
try to solve the problem now
Spoiler Alert!
Solution ahead!
Basic Code Solution:
<body>
<script>
d3.select('body')
.append('h1')
.text('Learning D3');
</script>
</body>
Code Explanation:
d3targets the D3 object.select('body')uses the D3selectmethod to target thebodyHTML node.append('h1')uses the D3appendmethod to "append" or attach anh1element to thebodyelement.text('Learning D3')uses the D3textmethod to change the text of theh1element 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


