3.5 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 587d7fa6367417b2b2512bc2 | Додавайте елементи документа за допомогою D3 | 6 | 301474 | add-document-elements-with-d3 |
--description--
У D3 є кілька способів, щоб додавати і змінювати елементи у вашому документі.
Метод select() дозволяє вибрати один елемент документа. Задається аргумент імені елемента, який вам потрібен і повертається HTML-вузол першого елемента в документі, який відповідає назві. Наприклад:
const anchor = d3.select("a");
У наведеному вище прикладі знайдено перший тег прив'язки на сторінці та збережено для нього HTML-вузол у змінній anchor. Вибирати елементи можна і за допомогою інших методів. Частина d3 в прикладі - це посилання на об’єкт D3, через яке ми отримуємо доступ до методів D3.
Ще два корисні методи: append() та text().
Метод append() приймає аргумент для елементу, який ви хочете додати до документа. До вибраного елемента додається HTML-вузол і ви отримуєте дескриптор до цього вузла.
Метод text() задає текст вибраного вузла або даний текст. Щоб задати значення, потрібно передати рядок у вигляді аргументу в дужках методу.
Ось приклад встановлення невпорядкованого списку, додавання пункту списку і тексту:
d3.select("ul")
.append("li")
.text("Very important item");
D3 дозволяє використовувати методи в комбінаціях, щоб виконувати кілька дій одна за одною.
--instructions--
Використовуйте метод select, щоб обрати тег body в документі. Тоді за допомогою append додайте тег h1, а тоді текст Learning D3 в елемент h1.
--hints--
Тег body повинен мати один елемент h1.
assert($('body').children('h1').length == 1);
Елемент h1 повинен містити текст Learning D3.
assert($('h1').text() == 'Learning D3');
Ваш код повинен мати доступ до об’єкта d3.
assert(code.match(/d3/g));
Ваш код має застосовувати методselect.
assert(code.match(/\.select/g));
Ваш код має застосовувати метод append.
assert(code.match(/\.append/g));
Ваш код має застосовувати метод text.
assert(code.match(/\.text/g));
--seed--
--seed-contents--
<body>
<script>
// Add your code below this line
// Add your code above this line
</script>
</body>
--solutions--
<body>
<script>
d3.select("body")
.append("h1")
.text("Learning D3")
</script>
</body>