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