Дожди в США, часть 8 — d3.scaleLinear, d3.extent для минимума и максимума

Проект Кодовые торты

Предыдущие уроки

  1. Удалить символы из начала строки JavaScript
  2. Разделить большой набор данных на меньшие наборы данных
  3. Обработка переключателей в D3.js
  4. Настройка области просмотра SVG с помощью D3.js
  5. Шаблон обновления данных D3.js
  6. Шкалы D3.js для оси X
  7. Использование данных D3.js для построения координат x

Процесс

Используйте d3.scaleLinear для создания yScale

Обзор шага

  1. Масштаб
  2. Ось
  3. Группа
  4. Обновлять
  5. Вызов

Масштаб

const yScale = d3.scaleLinear()
  .range([height, 0]);

Для создания шкалы вам понадобится домен данных. Домен представляет собой минимальное и максимальное количество осадков.

домен

Используйте d3.extent, чтобы получить минимальное и максимальное значения данных об осадках. Поместите эту строку над разделом, в котором вы разбиваете набор данных на более мелкие наборы данных.

const rainfallMinMax = d3.extent(data, d => d.rainfall);

Строка выше берет значение количества осадков из полного набора данных.

Установите домен для yScale.

Ось

Создайте ось Y. На данном этапе он не появится на экране. Используйте ось влево.

const yAxis = d3.axisLeft(yScale);

Группа

svg.append('g')

Обновлять

Мы не меняем ось Y при изменении набора данных для этого урока. Вам не нужно обновлять ось Y. Это облегчит аудитории сравнение количества осадков по разным наборам данных.

Вызов

На данном этапе круги не соответствуют yScale. Нам нужно использовать данные из файла CSV, чтобы настроить высоту каждого круга.

Следующий урок

Установить координату Y с помощью D3.js