3.2 KiB
3.2 KiB
title
| title |
|---|
| Add Inline Styling to Elements |
Add Inline Styling to Elements
Remember to use Read-Search-Ask if you get stuck. Try to pair program 
and write your own code 
Problem Explanation:
This challenge introduces the D3 style method, which takes 2 arguments: (key, value).
Relevant Links
Hint: 1
- Make sure both of your arguments are in quotations, single or double quotes will work
try to solve the problem now
Hint: 2
- In the example,
selection.stylerefers to an arbitrary selected element, chain yourstylemethod to the existing method chain
try to solve the problem now
Spoiler Alert!
Solution ahead!
Basic Code Solution:
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("h2")
.data(dataset)
.enter()
.append("h2")
.text((d) => (d + " USD"))
.style('font-family', 'verdana')
</script>
</body>
Code Explanation:
- the
stylemethod takes 2 arguments, the first is the key and the second the value - key in the
stylemethod is the property name that you would use in a CSS declaration - value is used just as a value would be used in a CSS declaration
- Since we are in JavaScript and
styleis a method we are calling, quotes must be used for the arguments. Otherwise, the function would try to use the value of the variablesfont-familyandverdana, which do not exist and would each throw a ReferenceError
Relevant Links
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 — Basic, Intermediate and Advanced.
