freeCodeCamp/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-...

1.9 KiB

id title challengeType
587d7fa6367417b2b2512bc3 Select a Group of Elements with D3 6

Description

D3 also has the selectAll() method to select a group of elements. It returns an array of HTML nodes for all the items in the document that match the input string. Here's an example to select all the anchor tags in a document: const anchors = d3.selectAll("a"); Like the select() method, selectAll() supports method chaining, and you can use it with other methods.

Instructions

Select all of the li tags in the document, and change their text to "list item" by chaining the .text() method.

Tests

tests:
  - text: There should be 3 <code>li</code> elements on the page, and the text in each one should say "list item". Capitalization and spacing should match exactly.
    testString: assert($('li').text().match(/list item/g).length == 3, 'There should be 3 <code>li</code> elements on the page, and the text in each one should say "list item". Capitalization and spacing should match exactly.');
  - text: Your code should access the <code>d3</code> object.
    testString: assert(code.match(/d3/g), 'Your code should access the <code>d3</code> object.');
  - text: Your code should use the <code>selectAll</code> method.
    testString: assert(code.match(/\.selectAll/g), 'Your code should use the <code>selectAll</code> method.');

Challenge Seed

<body>
  <ul>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
  </ul>
  <script>
    // Add your code below this line



    // Add your code above this line
  </script>
</body>

Solution

// solution required