freeCodeCamp/select-a-group-of-elements-with-d3.english.md at 1f2b66a432a24cc06c0ce74762e467777885a807

Files

Prayag 17be165d66 Add solution d3challenges (#38222 )

* added solutions to data visualization with D3

* Update add-a-tooltip-to-a-d3-element.english.md

* Update add-attributes-to-the-circle-elements.english.md

* Update add-axes-to-a-visualization.english.md

* Update add-document-elements-with-d3.english.md

* Update add-inline-styling-to-elements.english.md

* Update add-labels-to-scatter-plot-circles.english.md

* Update change-styles-based-on-data.english.md

* Update change-the-color-of-an-svg-element.english.md

* Update change-the-presentation-of-a-bar-chart.english.md

* Update create-a-bar-for-each-data-point-in-the-set.english.md

* Update create-a-linear-scale-with-d3.english.md

* Update create-a-scatterplot-with-svg-circles.english.md

* Update display-shapes-with-svg.english.md

* Update dynamically-change-the-height-of-each-bar.english.md

* Update dynamically-set-the-coordinates-for-each-bar.english.md

* Update invert-svg-elements.english.md

* Update learn-about-svg-in-d3.english.md

* Update select-a-group-of-elements-with-d3.english.md

* Update set-a-domain-and-a-range-on-a-scale.english.md

* Update style-d3-labels.english.md

* Update work-with-dynamic-data-in-d3.english.md

* Update use-a-pre-defined-scale-to-place-elements.english.md

* Update use-dynamic-scales.english.md

* Update use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.english.md

* Update work-with-data-in-d3.english.md

2020-04-24 06:34:53 -05:00

1.8 KiB

Raw Blame History

id, title, challengeType, forumTopicId

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

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);
  - text: Your code should access the <code>d3</code> object.
    testString: assert(code.match(/d3/g));
  - text: Your code should use the <code>selectAll</code> method.
    testString: assert(code.match(/\.selectAll/g));

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

<body>
  <ul>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
  </ul>
  <script>
    d3.selectAll("li")
      .text("list item")
  </script>
</body>

1.8 KiB Raw Blame History