--- id: 587d7fa7367417b2b2512bc5 title: Робота з динамічними даними в D3 challengeType: 6 forumTopicId: 301498 dashedName: work-with-dynamic-data-in-d3 --- # --description-- Останні два завдання охоплюють основи відображення даних динамічно з D3 за допомогою методів `data()` і `enter()`. Ці методи приймають набір даних і разом із методом `append()` створюють новий елемент DOM для кожного запису в наборі даних. У попередньому завданні ви створили новий елемент `h2` для кожного елемента масиву `dataset`, але всі вони містили один і той самий текст — `New Title`. Це тому, що ви не використали дані, пов’язані з кожним із елементів `h2`. Метод D3 `text()` може приймати рядок або зворотний виклик як аргумент: ```js selection.text((d) => d) ``` У прикладі вище параметр `d` посилається на один запис у наборі даних, до якого прив'язується вибране значення. Використаємо поточний приклад як контекст, перший елемент `h2` прив’язаний до 12, другий елемент `h2` прив’язаний до 31, третій елемент `h2` прив'язаний до 22 і так далі. # --instructions-- Змініть метод `text()`, щоб кожен елемент `h2` виводив відповідне значення з масиву `dataset` з одним пробілом та рядком `USD`. Наприклад, перший заголовок має бути `12 USD`. # --hints-- Перший елемент `h2` повинен містити текст `12 USD`. ```js assert($('h2').eq(0).text() == '12 USD'); ``` Другий елемент `h2` повинен містити текст `31 USD`. ```js assert($('h2').eq(1).text() == '31 USD'); ``` Третій елемент `h2` повинен містити текст `22 USD`. ```js assert($('h2').eq(2).text() == '22 USD'); ``` Четвертий елемент `h2` повинен містити текст `17 USD`. ```js assert($('h2').eq(3).text() == '17 USD'); ``` П'ятий елемент `h2` повинен містити текст `25 USD`. ```js assert($('h2').eq(4).text() == '25 USD'); ``` Шостий елемент `h2` повинен містити текст `18 USD`. ```js assert($('h2').eq(5).text() == '18 USD'); ``` Сьомий елемент `h2` повинен містити текст `29 USD`. ```js assert($('h2').eq(6).text() == '29 USD'); ``` Восьмий елемент `h2` повинен містити текст `14 USD`. ```js assert($('h2').eq(7).text() == '14 USD'); ``` Дев'ятий елемент `h2` повинен містити текст `9 USD`. ```js assert($('h2').eq(8).text() == '9 USD'); ``` # --seed-- ## --seed-contents-- ```html ``` # --solutions-- ```html ```