Этот туториал основан на видео с сайта freecodecamp, созданном Curran Kelleher (его можно найти здесь). Это отличное видео, рассказывающее об основах D3.js. И эта статья, по сути, представляет собой ее письменную версию для дальнейшего использования, так как обычно я не люблю заново изучать что-то с помощью видео.

Я расскажу только о первой части, создав гистограмму, чтобы больше сосредоточиться на базовой функции, предоставляемой D3.js, и на составлении основных элементов, необходимых для каждой диаграммы, таких как тики и формат.

Содержание

  • Базовый SVG
  • SVG с d3
  • Загрузка данных
  • Данные, форма и ввод, выход
  • Масштабирование в d3
  • Создание оси X и оси Y

Байск SVG

В отличие от другой библиотеки, которая предоставляет вам готовую диаграмму, и вы подключаете данные, D3 создает svg на основе вашего собственного определения и позволяет вам стилизовать его так, как вы хотите. Так гораздо свободнее.

С учетом сказанного, чтобы полностью использовать D3, вам нужно сначала понять svg. У MDN есть хороший учебник, который знакомит вас с тем, что вам нужно знать. Видео, ссылка на которое приведена выше, также содержит хорошее введение и упражнение по написанию кода.

Вот некоторые основные:

  • основные формы (например, прямоугольник, круг, линия) и путь
  • группировка фигур с тегом g
  • стиль с обычными css и svg по-прежнему похож на fill

SVG с d3.js

Чтобы создать форму svg с помощью d3.js, есть несколько основных функций:

  • выбрать()/создать()
  • .добавить()
  • .attr()

Загрузка данных

Библиотека D3.js предоставляет методы для обработки данных в общем формате, таком как csv, json и xml.

Здесь вы найдете документацию по нему. я не буду вдаваться в подробности

Данные, форма и ввод, выход

Чтобы сопоставить данные с диаграммой, мы в основном следуем этим двум шаблонам.

Сценарий 1 — выбрано элементов меньше, чем количество данных:

  1. selectAll() выберите элементы, которые необходимо обновить
  2. data() определяет выбор обновления (количество данных)
  3. enter() идентифицирует количество элементов, которые необходимо добавить в DOM (количество данных минус элементы, выбранные selectAll())
  4. append() добавить элементы

Сценарий 2 — выбрано больше элемента, чем количество данных

В отличие от enter() и append(), exit() и remove() используются, когда прямоугольника (в этом примере) больше, чем количество данных. Таким образом, вызывая exit(), он определяет количество элементов, которые необходимо удалить.

Это можно представить как следующий график:

Вот как мы обновляем график в d3, добавляя и удаляя элементы в DOM.

Масштабирование в D3

В диаграмме вам нужно знать масштаб ваших данных, например, минимум, максимум, медиана, чтобы вы могли правильно отображать свои данные. D3 предоставляет различные функции для вычисления масштаба для вас. Наиболее распространены линейные для количественных и ленточные для порядковых данных.

Базовая форма такова:

Что такое доман и диапазон?

Домен — это (обычно) фактический диапазон вашего набора данных.

Диапазон — это репрезентативный диапазон вашего набора данных на экране.

И ваш набор данных будет нанесен на график в соответствии с масштабом вашего домена и диапазона.

Безусловно, вы должны быть в состоянии создать такой график.

Создание оси X и оси Y

В основном есть 4 функции для создания оси x и оси y, в зависимости от того, где вы хотите расположиться. axisLeft, axisBottom, axisRight и axisTop — это четыре, которые вам нужны.

Чтобы использовать его, просто передайте шкалу, которую вы ранее создали. Затем добавьте его в svg.

Это в основном то, как вы создаете график с d3.js.

Создайте масштаб, введите данные и удалите лишнюю форму, затем создайте для нее ось.