Валежи в САЩ, част 6 — настройка на мащаби и ос

Проектът „Code Cakes“

Предишни уроци

  1. Премахване на символи от началото на JavaScript низ
  2. „Разделете голям набор от данни на по-малки набори от данни“
  3. Работа с радио бутони в D3.js
  4. Настройване на SVG Viewport с D3.js
  5. Модел за актуализиране на данни D3.js

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

Стъпка Общ преглед

  1. Мащаб
  2. ос
  3. Група
  4. Актуализация
  5. Повикване

Мащаб

Създайте xScale над секцията d3.csv. Все още не задавайте .domain.

const xScale = d3.scaleBand()
  .range([0, width])
  .padding(0.1);

ос

const xAxis = d3.axisBottom(xScale);

Група

създайте xGroup и преведете.

const xGroup = svg.append('g')
  .attr('transform', `translate(0, ${height})`);

Актуализация

в drawRain създайте масив от състояния за набора от данни. Ще използвате този набор от данни, за да актуализирате домейна на xScale.

Вземете държави

let states = [];
  dataset.forEach(element => {
    states.push(element.state);
  });

Актуализиране на домейна

xScale
  .domain(states);

Повикване

xGroup
    .call(xAxis);

Следващ урок

Използване на D3.js данни за начертаване на x-координата

Информация за проекта на Code Cakes

  • "Въведение"
  • YouTube
  • "Публикация"