Рецепты D3

 

Нажмите Esc для изменения масштаба.
Используйте стрелки для навигации.

## Ссылки - [Полное описание API](https://github.com/d3/d3/blob/master/API.md); - [Блоки Майка Бостока](https://bl.ocks.org/mbostock); - [Популярные блоки](https://bl.ocks.org/); - [MDN](https://developer.mozilla.org/ru/), документация по веб-технологиям: HTML, SVG, CSS, JavaScript.

Редактирование готовых блоков

Блок является отображением сохранённой в GitHub Gists веб-страницы.

Возьмите блок, например этот:
http://bl.ocks.org/devgru/8622071

для редактирования замените адрес сайта:
bl.ocks.org → blockbuilder.org
http://blockbuilder.org/devgru/8622071

для просмотра gist:
bl.ocks.org → gist.github.com
http://gist.github.com/devgru/8622071

Обновление версии D3

В интернете вы можете найти примеры и блоки, созданные с использованием старой версии D3 (обычно это версия 3).

Заменить версию нетрудно, но потребуется переименовать некоторые объекты. Вам поможет документация по 3 версии и описание изменений между 3 и 4 версиями.

Большая часть замен сводится к замене (например, d3.scale.linear → d3.scaleLinear), но некоторые утилиты требуют более

Выбираем шкалы

Документация по d3-шкалам.

1. Номинальная — сущности можно отличить. Линия метро, пол, профессия. 2. Порядковая — сущности можно расставить в осмысленный порядок. Возрастные группы, оценки в школе. 3. Интервальная — можно изучать разницу значений, обычная числовая шкала. 4. Абсолютная — есть наиболее значимый ноль, значения можно умножать, можно говорить «X больше Y в Z раз».
## Программируем шкалы Для номинальных и порядковых шкал берём [d3.scaleOrdinal](https://github.com/d3/d3-scale#scaleOrdinal). Для интервальных и абсолютных берём [d3.scaleLinear](https://github.com/d3/d3-scale#scaleLinear). Для группировки значений и создания порядковой шкалы можно использовать [d3.scaleThreshold](https://github.com/d3/d3-scale#threshold-scales). Для раскраски набора данных берём [d3.scaleOrdinal] и [category scales](https://github.com/d3/d3-scale#category-scales). Для использования предопределённых градиентов берём [d3.scaleSequential](https://github.com/d3/d3-scale#scaleSequential). Для создания RGB-градиентов по произвольному набору цветов используем обычный [d3.scaleLinear](https://github.com/d3/d3-scale#scaleLinear).
## Загрузка данных Для загрузки данных можно использовать утилиты из [d3-request](https://github.com/d3/d3-request). Функции `d3.csv`, `d3.text`, `d3.json`, `d3.xml` не только загружают файл, но и парсят его. Если CSV уже загружен другим способом (`fetch` и т.п.), используйте утилиты из https://github.com/d3/d3-dsv для парсинга.
## Обработка данных После загрузки данные обычно нужно обработать. Ниже рассмотрены самые необходимые функции для основных случаев.
## Обработка данных — числа Часто требуется распарсить строку, содержащую число. ```javascript // Например, d.id равен "15". Парсим: d.id = Number(d.id); // или d.id = +d.id; ```
## Обработка данных — даты Даты могут храниться в разных форматах. Для преобразования строки в JS-дату используется функция `d3.timeParse`. Функция принимает на вход строку, описывающую используемый формат даты. Эта строка составляется из специальных [символов](https://github.com/d3/d3-time-format/blob/master/README.md#locale_format) и разделителей между ними. ```javascript var parse = d3.timeParse('%m/%d/%y'); // Например, d.date равен "01/23/13". Парсим: d.date = parse(d.date); ```
## Обработка данных — массивы Бывает что в виде строки закодирован массив. Используем стандартный JS-метод `Array.split()`. ```javascript // Например, d.regions равен "ARK,BU,VLA". Парсим: d.regions = d.regions.split(','); ```
## Создание изменяющегося графика Иногда график должен уметь перерисовываться повторно. Причиной может быть обновление данных, изменение размера экрана, применение фильтрации. Если вы рендерите элементы с помощью `React`, `Vue`, `Angular` или другой подобной библиотеки — действуйте как обычно. Если же отрисовываете элементы с `D3` — изучите `General Update Pattern`: https://bl.ocks.org/mbostock/3808218
## General update pattern Вызов `selectAll` → `data` создаёт связанную выборку. На связанной выборке нужно проделать две операции: - удалить более ненужные элементы, для которых нет данных: `exit` → `remove`; - создать элементы для добавленных данных; `enter` → `append` → (опционально) `merge` → операции над существующими элементами. См. статью [Мыслим связками](http://d3.datalaboratory.ru/mike/join/).
## График-удав — Streamgraph Удобным форматом данных для графика-удава будет массив элементов, каждый из которых содержит все значения для одной вертикали. График-удав создаётся с использованием нескольких утилит: - [d3.area](https://github.com/d3/d3/blob/master/API.md#areas) для отрисовки замкнутых контуров; - [d3.stack](https://github.com/d3/d3/blob/master/API.md#stacks) для расстановки контуров по вертикали (см. значения [d3.stackOffset*](https://github.com/d3/d3-shape/blob/master/README.md#stack-offsets), которые позволяют выбрать способ расстановки); - [d3.nest](https://github.com/d3/d3/blob/master/API.md#nests) если данные нужно сгруппировать.
## Примеры удавов - https://bl.ocks.org/mbostock/3020685 - https://bl.ocks.org/mbostock/3885211 - https://bl.ocks.org/devgru/34293385130daf7202f0dcbe094b7d37
## Картограмма Для создания картограммы берём геоданные в формате `topojson`, что позволяет программировать рисование карты: раскрашивать регионы, расставлять точки по координатам, менять параметры проекции. Часто используется пороговая шкала ([d3.scaleThreshold](https://github.com/d3/d3-scale/blob/master/README.md#scaleThreshold)) в качестве цветовой. `domain` такой шкалы будет содержать меньше элементов чем `range`, т.к. элементы `domain` являются границами диапазонов. Для загрузки нескольких файлов данных удобно использовать `d3.queue`.
## Картограмма [Туториал](https://bost.ocks.org/mike/map/) Майка Бостока по созданию карт. Примеры: - http://bl.ocks.org/herrstucki/6312708 - http://bl.ocks.org/devgru/8623153
## Обработка событий D3 позволяет обрабатывать стандартные браузерные события (работа с мышью и клавиатурой), обработчик добавляется на выборку (см. [selection.on](https://github.com/d3/d3/blob/master/API.md#handling-events)). Кроме того, к выборке можно подключать утилиты, обрабатывающие события таким образом, чтобы реализовывать определенную механику — зум, перетаскивание и другие. Примеры использования таких утилит. - https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172 - https://bl.ocks.org/mbostock/6226534
## Лейауты D3 содержит набор утилит, позволяющих расставить графические элементы на экране. Такие утилиты называются layout. Они используются во многих видах графиков — столбчатых диаграммах, графиках-удавах, Санкей-диаграммах. Примеры использования лейаутов: - https://bl.ocks.org/mbostock/3886208 - https://bl.ocks.org/mbostock/ca9a0bb7ba204d12974bca90acc507c0 - https://bl.ocks.org/mbostock/e9ba78a2c1070980d1b530800ce7fa2b - https://bl.ocks.org/mbostock/4739610f6d96aaad2fb1e78a72b385ab - https://bl.ocks.org/mbostock/2675ff61ea5e063ede2b5d63c08020c7