как исправить 'this' не определено при вызове функции

Question

Я новичок в d3.js (v5) и angular (v7), и моя проблема заключается в том, что всякий раз, когда я вызываю функцию multiFormat для форматирования дат, «this» становится неопределенным.

попытался передать this.d3 напрямую в multiFormat, и он работает, но я не знаю, как передать параметр даты в этом случае ... Решение, которое работает, заключается в том, чтобы функция multiFormat объявила внутри addXandYAxis со всеми используемыми параметрами

private addXandYAxis() {
    const d3 = this.d3;
    let dmax = d3.extent(this.data, d => d3.timeParse('%d/%m/%Y')(d.date));
    dmax[0] = dmax[0].setMonth(dmax[0].getMonth() - 1);

    // definition des domains de X & Y 
    const xDomain = this.data.map(d => d.date);
    const yDomain = [0, this.d3.max(this.data, d => d.Donnees)];

    // localisation des dates
    const locale = this.d3.timeFormatLocale({
      dateTime: '%A, %e %B %Y г. %X',
      date: '%d.%m.%Y',
      time: '%H:%M:%S',
      periods: ['AM', 'PM'],
      days: ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'],
      shortDays: ['lu', 'ma', 'me' , 'je', 've', 'sa', 'di'],
      months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Decembre'],
      shortMonths: ['janv.', 'févr.', 'mars', 'avr', 'mai', 'juin', 'juill.' , 'août' , 'sept.' , 'oct.' , 'nov.' , 'déc.' ]
    });

    const formatMillisecond = locale.format('.%L');
    const formatSecond = locale.format(':%S');
    const formatMinute = locale.format('%I:%M');
    const formatHour = locale.format('%I %p');
    const formatDay = locale.format('%a %d');
    const formatWeek = locale.format('%b %d');
    const formatMonth = locale.format('%B');
    const formatYear = locale.format('%Y');

    function multiFormat(date) {
      console.log('date=' + date);
      return(d3.timeSecond(date) < date ? formatMillisecond
      : d3.timeMinute(date) < date ? formatSecond
      : d3.timeHour(date) < date ? formatMinute
      : d3.timeDay(date) < date ? formatHour
      : d3.timeMonth(date) < date ? (d3.timeWeek(date) < date ? formatDay : formatWeek)
      : d3.timeYear(date) < date ? formatMonth
      : formatYear)(date);
      }

Мне нужно использовать мультиформат в другом месте, и я предпочитаю избегать его дублирования.Я использую addXandYAxis в ngOnInit (), мой код:

public addXandYAxis() {
    const d3 = this.d3;
    const dmax = d3.extent(this.data, d => d3.timeParse('%d/%m/%Y')(d.date));

    // define X & Y domains
    const xDomain = this.data.map(d => d.date);
    const yDomain = [0, this.d3.max(this.data, d => d.Donnees)];

    // Abscisse --> date
    this.x = d3.scaleTime()
    .domain(dmax)
    .range([ 0, this.width ]);

    this.xAxis = d3.axisBottom(this.x);

    this.svg.append('g')
    .attr('transform', 'translate(0,' + this.height + ')')
    .call(this.xAxis.tickFormat(this.multiFormat));
  }

 private multiFormat(date) {
    return(this.d3.timeSecond(date) < date ? this.formatMillisecond
      : this.d3.timeMinute(date) < date ? this.formatSecond
      : this.d3.timeHour(date) < date ? this.formatMinute
      : this.d3.timeDay(date) < date ? this.formatHour
      : this.d3.timeMonth(date) < date ? (this.d3.timeWeek(date) < date ? this.formatDay : this.formatWeek)
      : this.d3.timeYear(date) < date ? this.formatMonth
      : this.formatYear)(date);
      }

результат - ОШИБКА TypeError: "this.d3 не определено"

Спасибо за ваше время:)

Answer 1

Вы можете использовать замыкание для вызова мультиформат так что вы можете сделать это

    this.svg.append('g')
.attr('transform', 'translate(0,' + this.height + ')')
.call(this.xAxis.tickFormat(()=>{this.multiFormat()}));

потому что это ссылка на область, где была вызвана функция

Answer 2

Как правило, проблемы с this могут быть решены путем преобразования нарушающих функций в функции стрелок:

public addXandYAxis = () => {
// ...

private multiFormat = (date) => { 
// ...