5.2 KiB
5.2 KiB
id | title | required | challengeType | videoUrl | localeTitle | |||
---|---|---|---|---|---|---|---|---|
587d7fa7367417b2b2512bc4 | Work with Data in D3 |
|
6 | Работа с данными в D3 |
Description
data()
используется для выбора элементов DOM для привязки данных к этим элементам. Набор данных передается в качестве аргумента методу. Общий шаблон рабочего процесса - создать новый элемент в документе для каждой части данных в наборе. Для этой цели D3 имеет метод enter()
. Когда метод enter()
комбинируется с методом data()
, он просматривает выбранные элементы со страницы и сравнивает их с количеством элементов данных в наборе. Если элементов меньше, чем элементов данных, это создает недостающие элементы. Вот пример, который выбирает элемент ul
и создает новый элемент списка в зависимости от количества записей в массиве: <Тело>Может показаться странным выбирать элементы, которые еще не существуют. Этот код сообщает D3, чтобы сначала выбрать
<UL> </ UL>
<Скрипт>
const dataset = ["a", "b", "c"];
d3.select ( "UL"). SelectAll ( "Ли")
.data (набор данных)
.войти()
.append ( "Ли")
.text («Новый элемент»);
</ Скрипт>
</ Body>
ul
на странице. Затем выберите все элементы списка, которые возвращают пустой выбор. Затем метод data()
проверяет набор данных и запускает следующий код три раза, один раз для каждого элемента массива. Метод enter()
видит, что на странице нет элементов li
, но для этого требуется 3 (по одному для каждой части данных в dataset
). Новые элементы li
добавляются в ul
и имеют текст «Новый элемент». Instructions
body
, затем выберите все элементы h2
. Создайте D3 и добавьте тег h2
для каждого элемента массива dataset
. Текст в h2
должен содержать «Новое название». Ваш код должен использовать методы data()
и enter()
. Tests
tests:
- text: Ваш документ должен содержать 9 <code>h2</code> элементов.
testString: 'assert($("h2").length == 9, "Your document should have 9 <code>h2</code> elements.");'
- text: Текст в элементах <code>h2</code> должен указывать «Новое название». Капитализация и интервал должны соответствовать точно.
testString: 'assert($("h2").text().match(/New Title/g).length == 9, "The text in the <code>h2</code> elements should say "New Title". The capitalization and spacing should match exactly.");'
- text: Ваш код должен использовать метод <code>data()</code> .
testString: 'assert(code.match(/\.data/g), "Your code should use the <code>data()</code> method.");'
- text: Ваш код должен использовать метод <code>enter()</code> .
testString: 'assert(code.match(/\.enter/g), "Your code should use the <code>enter()</code> method.");'
Challenge Seed
<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>
Solution
// solution required