Работа с данными в D3
Библиотека D3 фокусируется на подходе, основанном на данных. Когда у вас есть набор данных, вы можете применить методы D3, чтобы отобразить их на странице. Данные поступают во многих форматах, но этот вызов использует простой массив чисел. Первый шаг - сделать D3 осведомленным о данных. Метод 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 и имеют текст «Новый элемент».Выберите узел body , затем выберите все элементы h2 . Создайте D3 и добавьте тег h2 для каждого элемента массива dataset . Текст в h2 должен содержать «Новое название». Ваш код должен использовать методы data() и enter() .