завершить проект, создав ось Y
Предыдущие уроки
- Уроки №1 — Настройка проекта BTS
- Урок №2 — Чтение и отображение текстовых данных
- Урок №3 — Показ изображений
- Урок №4 — Настройка графика статистики
- Урок №5 — Делим программу на маленькие кусочки
Образовательные ресурсы
Создание весов и весов роста
- создать
get heightScale()
- назначить константы для
heightMin
иheightMax
- создать константу для
heightScale
.domain
is[heightMin -1, …]
- установить диапазон. Используйте
this.height
для высоты области диаграммы - вернуть
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()
- создайте константу
yAxisContainer
и назначьте ее группе, добавив группу.append('g')
кthis.svg
- привязать атрибут
('id', 'yAxis')
к группе - используйте оператор if, чтобы проверить, является ли выбор весом или ростом
- если рост, используйте
.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
get yAxisLabel() {...
- const yLabelHeight
- const yLabelOffset (отрицательное значение для перемещения влево)
- добавить текст
- добавить атрибут для id
yAxisLabel
- близко к верхней части геттера, выберите идентификатор для yAxisLabel и удалите его
- Изменить текст метки оси Y в changeStats()
- создайте аналогичный
.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);
Вопросы
- В разделе выше, где определяется
this.datapoints
?
2. В методе generateDatapoints()
что делает каждая строка? Где взять this.data
в строке 27? Что такое this.getImageFile(d)
в строке 31?
3. В чем преимущество помещения методов в класс?
4. Что делает constructor
?
5. К чему относится this
?
6. В drawChart
как вы используете класс? Зайдите в файл и объясните.
7. Можем ли мы в drawChart.js
использовать функцию с толстой стрелкой для обработки события нажатия кнопки statsButton?
Поздравления
Вы завершили проект D3 BTS.