завершить проект, создав ось Y

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

Образовательные ресурсы

Создание весов и весов роста

  1. создать get heightScale()
  2. назначить константы для heightMin и heightMax
  3. создать константу для heightScale
  4. .domain is [heightMin -1, …]
  5. установить диапазон. Используйте this.height для высоты области диаграммы
  6. вернуть heightScale

повторить процесс для weightScale()

// JavaScript Getter
  get heightScale() {
    const heightMin = d3.min(this.data, d => d.height);
    const heightMax = d3.max(this.data, d => d.height);
    const heightScale = d3.scaleLinear()
      .domain([heightMin - 1, heightMax])
      .range([this.height, 0]);
    return heightScale;
  }
// JavaScript Getter
  get weightScale() {
    const weightMin = d3.min(this.data, d => d.weight);
    const weightMax = d3.max(this.data, d => d.weight);
    const weightScale = d3.scaleLinear()
      .domain([weightMin - 2, weightMax])
      .range([this.height, 0]);
    return weightScale;
  }

Создайте ось веса и высоты

Создайте два разных геттера, один для heightAxis() и один для weightAxis().

// JavaScript Getter
  get heightAxis() {
    return d3.axisLeft(this.heightScale);
  }
// JavaScript Getter
  get weightAxis() {
    return d3.axisLeft(this.weightScale);
  }

Отображать ось в changeStats()

  1. создайте константу yAxisContainer и назначьте ее группе, добавив группу .append('g') к this.svg
  2. привязать атрибут ('id', 'yAxis') к группе
  3. используйте оператор if, чтобы проверить, является ли выбор весом или ростом
  4. если рост, используйте .call(this.heightAxis)

changeStats(selection) {

    const yAxisContainer = this.svg.append('g')
      .attr('id', 'yAxis');
    if (selection == 'height') {
      yAxisContainer
        .call(this.heightAxis);

добавьте else if для проверки веса.

if (selection == 'height') {
      yAxisContainer
        .call(this.heightAxis);
    } else if (selection == 'weight') {
      yAxisContainer
        .call(this.weightAxis);
    }

удалить старую ось

ближе к началу метода changeStats(selection) удалите существующую ось Y.

d3.select('#yAxis').remove();

Добавить точки данных

привязать атрибут y к this.datapoint

намекать:

.attr('y', d => this.heightScale(d.height));

Отрегулируйте cy вверх, вычитая половину imageSize

сравните самые низкие значения, чтобы убедиться, что график точен.

проверить вес.

Создайте геттер для меток оси Y

  1. get yAxisLabel() {...
  2. const yLabelHeight
  3. const yLabelOffset (отрицательное значение для перемещения влево)
  4. добавить текст
  5. добавить атрибут для id yAxisLabel
  6. близко к верхней части геттера, выберите идентификатор для yAxisLabel и удалите его
  7. Изменить текст метки оси Y в changeStats()
  8. создайте аналогичный .text для высоты.

// JavaScript Getter
  get yAxisLabel() {
    d3.select('#yAxisLabel').remove();
    const yLabelHeight = this.height * 0.75;
    const yLabelOffset = -60;
    const yAxisLabel = this.svg.append('text')
      .attr('x', yLabelOffset)
      .attr('y', yLabelHeight)
      .attr('transform', `rotate(-90, ${yLabelOffset}, ${yLabelHeight})`)
      .attr('id', 'yAxisLabel');
    return yAxisLabel;
  }

в changeStats()

this.yAxisLabel.text('BTS Member Weight (lbs)');

Теперь вы близки к завершению проекта.

Добавьте переходы.

this.datapoints                               
  .attr('y', '0')                               
  .transition()                               
  .attr('y', d => this.heightScale(d.height) - this.imageSize/2)                    
  .duration(800);

Вопросы

  1. В разделе выше, где определяется this.datapoints?

2. В методе generateDatapoints() что делает каждая строка? Где взять this.data в строке 27? Что такое this.getImageFile(d) в строке 31?

3. В чем преимущество помещения методов в класс?

4. Что делает constructor?

5. К чему относится this?

6. В drawChart как вы используете класс? Зайдите в файл и объясните.

7. Можем ли мы в drawChart.js использовать функцию с толстой стрелкой для обработки события нажатия кнопки statsButton?

Поздравления

Вы завершили проект D3 BTS.