Э. Рининсланд - Визуализация данных с помощью библиотеки D3.js 4.x

расширяемости.

Д
ill

�

Есл и в � ранее извлекли ветку origin/chapterl из G t-репозитория ,
_
то в неи вы сеичас
и находитесь, и рассмотренныи выше код хран ится в отдельном файле. Если м ы по пути где-то разминулись, то ,
чтобы встретиться снова, выпол ните команду git stash save && git
checkout origin/c hapterl, находясь в каталоге learning-d3 -v4/ .

Вернемся к файлу index . j s и создадим уже таблицу.
Добавьте в файл main . j s такой код :
import taЬleFactory from ' . /chapter2/taЫe-factory ' ;

оом

·:·

45

const header = [ ' one ' , ' two ' , ' three ' , ' four ' , ' Пvе ' , ' six ' ] ;
const rows =
header,
[ 'q ' , 'w' , 1е ' , • r • , 't' , •у• ],
];
const tаЫе = taЬleFactory ( rows ) ;

В КО1\1андной строке выполните команду:
$ npm start

В браузере перейдите по адресу http : / / 127 . 0 . 0 . 1 : 8080. Щелкни­
те правой кнопкой мыши по странице, выберите из меню ко.манду
Inspect Element ( Просмотреть код) - и вы увидите элемент tаЫе:
< s c ript s rc="La s s e t sLbund le . j s "> [ ' Seven ' , ' u ' , ' j ' , ' m ' ] [ i ] )

Динамическое задание содержимого с помощью функции позво­
ляет выбрать нужную строку из списка значений в зависимости от
индекса столбца i. Схема понятна?
Метод . remove ( ) позволяет удалить элементы. Например, удалить
последнюю строку таблицы можно следующим образом:
dЗ . selectAll ( ' tbody t r : last-child ' ) . remove ( )

Соединение данны х с в ыбор к ами
Мы подошли к интересной части наших забав с DOM. Помните, я го­
ворил, что HTM L - это визуализация данных? Так вот, соединение
данных с выборками и есть интересующий нас .механизм.
Для соединения данных с выборкой предназначена функция
. data ( ) . Она принимает в качестве аргумента функцию или массив
и необязательную функцию, которая сообщает DЗ, как отличить одни
части данных от других.
В процессе соединения данных с выборкой может произойти одно
из трех:
О данных больше, чем выбранных элементов (длина данных
больше длины выборки). Для ссылки на новые данные служит
функция . enter ( ) ;
О данных ровно столько, сколько и раньше. Для обновления со­
стояния элементов можно воспользоваться выборкой, возвра­
щенной самой функцией . data ( ) ;
О данных меньше, чем раньше. Для ссылки на отсутствующие
данные служит функция . exit ( ) .
В версии DЗ v4 появилась еще функция . merge ( ) , которая позволя­
ет выполнять операции над выборками, содержащими как новые, так
и обновленные элементы.

50

•:•

Начала ООМ 9/G и CSS

Функции . enter ( ) и . exit ( ) нельзя сцеплять, потому что они воз­
вращают просто ссылки, не создавая новую выборку, а вот функции
. enter ( ) и . merge ( ) сцеплять ,�южно. Это означает, что обычно наше
внимание обращено на . enter ( ) и . exit ( ) , и все три случая нужно об­
рабатывать отдельно.
Возникает вопрос: « Как возможно, что данных одновре1',1 енно
больше и меньше, чем раньше?» Дело в том, что элементы выборки
связаны с конкретными элементами данных, а не с их номерами. Если
вы сначала сдвинули массив (т. е. удалили первый элемент), а затем
добавили новый элеJ\·t ент в конец массива, то старый первый элемент
будет доступен по ссылке . exit ( ) , а новый - по ссылке . enter ( ) . Это
невероятно мощный механизм, который позволяет DЗ отслеживать
изменение данных, не заставляя нас писать однообразный код.

Д
ill

Элемент дан ных ( datum ) передается фун кциям обратного вызо­
ва в аргументе d . Отмети м также, что существует метод selection .
datum ( ) , который принимает единственный объект и применяет его
ко всем выбранным элементам .

Давайте сделаем что-нибудь интересное с помощью соединений
и НТМL.

П ри мер визуал изаци и с помо щ ь ю HTM L
Мы визуализируем данные Всемирной организации здравоохра­
нения по ожидаемой продолжительности жизни в разных странах,
представив их в виде простой таблицы.
Набор данных можно получить по адресу http://apps.wh o . iпt/gho/
data/пode.maiп.688, щелкнув по ссылке JSON simplified structure.
Сохраните его в каталоге data/ (если вы в начале главы выполнил и
команду git checkout, т о набор данных уже там).
Создайте файл index . j s в каталоге lib/chapter2 и замените код
в файле main . j s таким:
import lifeExpectancyTaЫe from ' . /chapter2/index ' ;
lifeExpectancyTaЬle ( ) ;

Добавьте показанный ниже код в файл c h a pter2/index . j s:
import taЫeFactory from ' . /taЫe -factory ' ;
export default async function lifeExpectancyTaЫe ( )
const getData = async ( ) = > {
try {
const response = await fetch ( ' data/who-gho - life- expectancy . j son ' ) ;

Так что же м ы слелали?
const raw

=

•:•

51

await response . j son ( ) ;

} catch ( е ) {

console . error ( e ) ;
return undefined ;

}

};

}

Здесь мы воспользовались одной из лучших, на мой взгляд, воз­
можностей ES7, которую --">