Разделите программу статистики на более мелкие части, чтобы упростить управление

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

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

Урок

Мы внесем все изменения в файл 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

  1. Выбрать
  2. данные
  3. входить
  4. добавить
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 каждой точки данных в зависимости от нажатия кнопки.

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

Урок 6 — Завершить проект