4.3 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 587d7fa7367417b2b2512bc4 | Працюйте з даними в D3 | 6 | 301497 | work-with-data-in-d3 |
--description--
Бібліотека D3 фокусується на підході керування даними. Якщо у вас є набір даних, ви можете застосувати методи D3, щоб відтворити дані на сторінці. Дані надходять у багатьох форматах, але в цьому завданні використано простий масив чисел.
Перший крок: повідомити D3 про дані. Метод data() використовують до виділених елементів DOM, щоб приєднати дані до цих елементів. Набір даних передається як аргумент до методу.
Поширений шаблон робочого процесу — це створити новий елемент в документі для кожної частини даних у наборі. D3 має метод enter() для цієї мети.
Коли метод enter() об’єднується з методом data(), то він розглядає вибрані елементи зі сторінки та порівнює їх з кількістю елементів даних у наборі. Якщо кількість елементів менша за кількість елементів даних, то він створює відсутні елементи.
Ось приклад, який вибирає елемент ul та створює новий елемент списку, що базується на кількості записів у масиві:
<body>
<ul></ul>
<script>
const dataset = ["a", "b", "c"];
d3.select("ul").selectAll("li")
.data(dataset)
.enter()
.append("li")
.text("New item");
</script>
</body>
Вибір елементів, які ще не існують, може здатися вам складним. Цей код повідомляє D3, що спочатку на сторінці потрібно вибрати ul. Потім виберіть всі елементи списку, що поверне порожню вибірку. Після цього метод data() оглядає набір даних і тричі запускає наступний код, по одному разу для кожного елемента в масиві. Метод enter() бачить, що на сторінці немає елементів li, але йому потрібно 3 (по одному для кожної частини даних в dataset). Нові елементи li приєднуються до ul та мають текст New item.
--instructions--
Оберіть вузол body, а потім оберіть всі елементи h2. Заставте D3 створити та приєднати тег h2 до кожного елемента в масиві dataset. Текстом в h2 має бути New Title. Код має використати методи data() та enter().
--hints--
Документ має містити 9 елементів h2.
assert($('h2').length == 9);
Текстом в елементах h2 має бути New Title. Великі літери та інтервали мають збігатися точно.
assert(
$('h2')
.text()
.match(/New Title/g).length == 9
);
Код має використати метод data().
assert(code.match(/\.data/g));
Код має використати метод enter().
assert(code.match(/\.enter/g));
--seed--
--seed-contents--
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
// Add your code below this line
// Add your code above this line
</script>
</body>
--solutions--
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body")
.selectAll("h2")
.data(dataset)
.enter()
.append("h2")
.text("New Title")
</script>
</body>