Files

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

2.2 KiB

Raw Blame History

title

title
Work with Data in D3

Work with Data in D3

Problem Explanation

This challenge uses the select, selectAll, append, and text methods seen in previous challenges. It adds 2 new D3 methods: data and enter to target the given data and display an element on the page for each datum

Relevant Links

From the official D3 documentation:

data
enter

Hints

Hint 1

After selecting the correct HTML nodes, use the data method with the dataset variable passed as an argument to make the D3 object aware of the data

Hint 2

Use the enter method to ensure that your HTML document has enough elements of the type you specified in selectAll for each datum

Hint 3

Now that the D3 object is aware of your data and has created enough elements for each datum, append the elements of the specified type and add the text required in the instructions

Solutions

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('New Title');
    
  </script>
</body>

Code Explanation

d3 targets the D3 object
select('body') is used to select the 'body' element of the HTML document
selectAll('h2') is used to selectAll of the 'h2' elements that are children to 'body'
data(dataset) calls the D3 data method and uses the given dataset as an argument
enter() uses the D3 enter method to check the current number of elements selected and create any missing ones according to the amount needed by the dataset
append('h2') takes these newly created elements from enter and ensures they are created as 'h2' elements
text('New Title') changes the text of every element selected to 'New Title'
The dataset contains 9 datum, so the final solution should show 9 'h2' elements with the text 'New Title'

2.2 KiB Raw Blame History