Разделите программу статистики на более мелкие части, чтобы упростить управление
Предыдущие уроки
- Уроки №1 — Настройка проекта BTS
- Урок №2 — Чтение и отображение текстовых данных
- Урок №3 — Показ изображений
- Урок №4 — Настройка графика статистики
Образовательные ресурсы
Урок
Мы внесем все изменения в файл chartClass.js
.
окно просмотра svg
Ниже конструктора создайте новый метод с именем generateSvg()
. В этом методе определите const svg и верните его.
generateSvg() { const svg = d3.select(this.idHtml) .attr('width', this.width + this.margin.left + this.margin.right) .attr('height', this.height + this.margin.top + this.margin.bottom) .append('g') .attr('transform', `translate( ${this.margin.left}, ${this.margin.top} )`); return svg; }
После определения метода запустите метод в конструкторе и назначьте его this.svg
.
this.svg = this.generateSvg();
Теперь вы можете использовать this.svg
в любом из методов или геттеров в классе.
имена членов ()
Под constructor
добавьте геттер memberNames()
, используя новое ключевое слово get
.
get memberNames() { const memberNames = []; this.data.forEach(eachMember => { memberNames.push(eachMember.name); }); return memberNames; }
протестировать новое попадание в constructor
. Вы можете распечатать значение геттера memberNames()
, используя this.memberNames
console.log(this.memberNames);
Вы должны увидеть результаты массива на консоли.
хМасштаб
создайте шкалу x, используя ту же технику получения. Вы можете получить доступ к this.memberNames
в новом геттере xScale()
.
get xScale() { const xScale = d3.scaleBand() .domain(this.memberNames) .range([0, this.width]); return xScale; }
создать ось x
создайте метод с именем, createXaxis()
отобразите ось x на экране.
createXaxis() { const xAxis = d3.axisBottom(this.xScale); this.svg.append('g') .call(xAxis) .attr('transform', `translate(0, ${this.height})`); }
Создайте метод getImageFile()
getImageFile(d) { if (d.name == 'Kim Namjoon') { return 'assets/kim-namjoon-150x150-circle.png'; } else if (d.name == 'Kim Seokjin') { return 'assets/kim-seokjin.png'; } else if (d.name == 'Jung Hoseok') { return 'assets/jung-hoseok-150x150-circle.png'; } else if (d.name == 'Jeon Jeong-guk') { return 'assets/jungkook-150x150-circle.png'; } else if (d.name == 'Kim Taehyung') { return 'assets/kim-taehyung-150x150.png'; } else if (d.name == 'Min Yoongi') { return 'assets/min-yoongi.png'; } else if (d.name == 'Park Jimin') { return 'assets/park-jimin-150x150-circle.png'; } }
создать метод generateDatapoints()
привязать данные к элементу svg image
.
применить шаблон привязки данных d3
- Выбрать
- данные
- входить
- добавить
generateDatapoints() { const datapoints = this.svg.selectAll('image') .data(this.data) .enter() .append('image') .attr('x', d => this.xScale(d.name) - this.imageSize/2 + this.xScale.bandwidth() /2 ) .attr('xlink:href', d => this.getImageFile(d)) .attr('width', this.imageSize) .attr('height', this.imageSize); return datapoints; }
запустить метод в конструкторе.
this.svg = this.generateSvg(); this.datapoints = this.generateDatapoints(); this.createXaxis();
Вы должны увидеть точки данных, нанесенные на график со значением y «0», так как мы еще не установили значение y для каждой точки.
На следующем уроке вы создадите шкалу Y, ось Y и метки осей. Затем вы отрегулируете положение y каждой точки данных в зависимости от нажатия кнопки.