gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
d01985b6b29b40b2772b5351b809aeafecbb9037
freeCodeCamp/guide/english/certifications/data-visualization/data-visualization-with-d3/add-inline-styling-to-elements/index.md
Randell Dawson 1494a50123 fix(guide): restructure curriculum guide articles (#36501) 
* fix: restructure certifications guide articles
* fix: added 3 dashes line before prob expl
* fix: added 3 dashes line before hints
* fix: added 3 dashes line before solutions
2019-07-24 13:29:27 +05:30

1.7 KiB
Raw Blame History

title
title
Add Inline Styling to Elements

Add Inline Styling to Elements

Problem Explanation

This challenge introduces the D3 style method, which takes 2 arguments: (key, value).

Relevant Links

Hints

Hint 1

  • Make sure both of your arguments are in quotations, single or double quotes will work

Hint 2

  • In the example, selection.style refers to an arbitrary selected element, chain your style method to the existing method chain
Solution 1 (Click to Show/Hide) 
<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 style method takes 2 arguments, the first is the key and the second the value
  • key in the style method 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 style is a method we are calling, quotes must be used for the arguments. Otherwise, the function would try to use the value of the variables font-family and verdana, which do not exist and would each throw a ReferenceError

Relevant Links