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>