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

Эндрю Рининсланд, Свизек Теллер

с

8и3уали3аuия данных
помошью библиотеки 03.js 4.х

A:ndrew Rininsland, S\vizec Teller

03.js 4.х
Data Visualization
Learn to visualize your data with JavaScript

Third Edition

Pacl
BIRMINGHAM - MUMBAI

Эндрю Рининсланд, Свизек Теллер

8и3уали3аuиs� данных
с помошью библиоте1 ; браузеры создают этот узел, даже если тег явно не за-

40

•:•

Н ачала DOM SVG и CSS

дан, и строят под ним дерево, описывающее, как выглядит документ.
Рассмотрим простой НТМL-документ:
< ! DОСТУРЕ html>
A title

< р >А paragraph of text
< /div>

List item< /li>
< l i > List item 2, < strong>italic< /em>


Обратите внимание на отсутствие тегов < html > , < head> и < body >.
Chгome этот доку:мент разбирает следующим образо.м:

А paragraph of text
•

List item

•

List item 2 , italic

Вы увидите это дерево, если введете на консоли J avaScгipt слово
document. Двойным щелчком мыши дерево можно раскрыть, тогда
Chгome будет подсвечивать часть страницы, соответствующую тому
элементу на консоли, над которым находится курсор мыши.
М ожете также п р отести ровать выбор п роизвольного эле м е н ­
та , н а б р а в на консол и команду $ ( ' . some - selector ' ) . Даже есл и
на стран и цу не и м п о ртирована jQuery, эта конструкци я все
равно будет работать, п ото му что на консол и C h ro m e о н а яв­
л я ется встроен н ы м с и н о н и м о м для d o c ument . q u e rySelector ( ' .
some - selector ' ) ( н о переоп ределяется jQuery, есл и о н а вкл ючена
в состав стра н и цы ) . Аналогич н о $ $ ( ' . some - s electo r ' ) я вляется аб­
бреви атурой метода document . q u e rySelectorAll ( ' . some - selecto r ) ,
п олезного , ко гда требуется вернуть все в ы б р а н н ы е элементы ,
не тол ько первы й .

М ан и пули рова ние D O M с помо щ ью d З - выбор ки
У каждого узла в дереве D O М имеется целый набор методов и свойств,
позволяющих манипулировать документо!'.I.

оом

·:·

41

Для примера рассмотрим НТМL-код из примера выше. Чтобы сде­
лать слово italic подчеркнутым, полужирным и курсивным (резуль­
тат применения тегов и < strong> ) , следовал о бы написать такой
код:
document . querySelector ( ' strong ' ) . style
. setProperty ( ' text - decoration ' , ' underline ' )

Метод doc ument . querySelector находит первый элемент с тегом
< strong> и возвращает его. Затем мы подчеркивае1\I найденнь11':'1 эле­
мент, задав для него свойство text -decoration.
Применение современного DOM API гораздо элегантнее, чем
в прошлые времена, но чревато неприятностями, если не дополнить
функциональность браузера с помощью поли фuлов. Можно было бы
использовать для этой цели библиотеку j Query, которая предлагает
изящный API для такого стиля разработки, или воспользоваться DЗ,
в которую включен аналогичный набор средств для выборки и ма­
нипулирования элементами DOM (все они находятся в пакете d З ­
selection ) .
Благодаря dЗ-выборке мы можем рассматривать HTML просто как
еще один тип визуализации данных. Запомните и запишите - старый
добрый HTML можно использовать для визуализации данных.
На практике это означает, что, применяя одни и те же приемы, мы
можем представить данные в виде таблицы или интерактивного изо­
бражения. А главное - для этого понадобятся одни и те же данные.
Перепишем пример выше с помощью dЗ-выборки:
import * as dЗ from ' dЗ ' ;
dЗ . select ( ' strong ' ) . style ( ' text-decoration ' , ' underline ' )

Гораздо проще! Мы выбрали элемент с тегом strong и задали для
него свойство с помощью метода style. И все!
Кстати говоря, любое свойство, заданное средствами DЗ, может
быть динамическим, т. е. в качестве его значения может фигурировать
функция. Ниже мы увидим, почему это полезно.
Описанная только что операция называется выборкой. Она лежит
в основе всей работы DЗ - метод dЗ . select выбирает один элемент,
а метод dЗ . selectAll создает похожую на массив выборку, содержа­
щую несколько элементов. Познакомимся с выборками поближе.

В ыборки
Выборка - это массив элементов текущего документа, отобранных
с помощью некоторого СSS-селектора. Строить выборку можно по

42

•:•

Н ачаАа DOM 9./G и CSS

классу, по идентификатору или по имени тега. Можно даже исполь­
зовать псевдоселекторы, позволяющие, например, выбрать каждый
второй абзац: p : nth - c hild ( n+l ) .

Д
ill

Псевдоселекторы в сочетании с DЗ весьма эффективный мexa­
низм , зачастую они позволяют заменить цикл или сложные математические вычисления. Синтаксически они отличаются наличием
двоеточия в начале и описывают состоя ние элемента . Например,
псевдоселектор : hover акти вен , если курсор мыши находится над
элементо м --">