freeCodeCamp

5.2 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7fa7367417b2b2512bc4	Work with Data in D3	6		Работа с данными в D3

Description

Библиотека D3 фокусируется на подходе, основанном на данных. Когда у вас есть набор данных, вы можете применить методы D3, чтобы отобразить их на странице. Данные поступают во многих форматах, но этот вызов использует простой массив чисел. Первый шаг - сделать D3 осведомленным о данных. Метод data() используется для выбора элементов DOM для привязки данных к этим элементам. Набор данных передается в качестве аргумента методу. Общий шаблон рабочего процесса - создать новый элемент в документе для каждой части данных в наборе. Для этой цели D3 имеет метод enter() . Когда метод enter() комбинируется с методом data() , он просматривает выбранные элементы со страницы и сравнивает их с количеством элементов данных в наборе. Если элементов меньше, чем элементов данных, это создает недостающие элементы. Вот пример, который выбирает элемент ul и создает новый элемент списка в зависимости от количества записей в массиве:

<Тело>
<UL> </ UL>
<Скрипт>
const dataset = ["a", "b", "c"];
d3.select ( "UL"). SelectAll ( "Ли")
.data (набор данных)
.войти()
.append ( "Ли")
.text («Новый элемент»);
</ Скрипт>
</ Body>

Может показаться странным выбирать элементы, которые еще не существуют. Этот код сообщает D3, чтобы сначала выбрать 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

5.2 KiB Raw Blame History Unescape Escape