d3. js Переходные разрывы в Angular - attrTween неправильно называет 'this' - PullRequest
Новая
       3

d3. js Переходные разрывы в Angular - attrTween неправильно называет 'this'

1 голос
/ 29 февраля 2020

Я пытаюсь воссоздать этот пример d3. js v5 кольцевая диаграмма с переходом в качестве Angular компонента, используя последний шаблон ввода / обновления / выхода в d3 v5. Все выглядело хорошо, пока я не поигрался с числами в примерах данных, и переход не сломался. У меня это выделено здесь, на Stackblitz . Вы увидите, как это происходит, но если вы измените первое значение объекта oranges обратно на 200, вы увидите, что оно работает нормально. Я как бы увеличил причину, и она, похоже, находится в функции arcTween, где ей нужен доступ к вызывающей функции this._current, но я думаю, что она ищет ее в компоненте Angular. 

update(fruit) {
    this.svg
        .datum(this.data)
        .selectAll('path')
        .data(d3Shape.pie()
            .value((d: any) => d[fruit])
            .sort(null))
        .join(
            enter => enter
                .append('path')
                .text(d => d)
                .attr('fill', (d, i) => this.color(i))
                .attr('d', this.arc)
                .each(function (d) { this._current = d; }), // <--- This is the _current that I need access to 
            update => update
                .transition()
                .duration(2000)
                .attrTween('d', this.arcTween)
                .attr('fill', (d, i) => this.color(i))
                .attr('d', this.arc),
            exit => exit.remove()
    );
}


arcTween(a) {
  var i = d3Interpolate.interpolate(this._current, a); // It is assuming 'this' refers to a component level variable, should be the calling function scope
  this._current = i(0);
    return (t) => {
      return this.arc(i(t)); //  <-- this is referring correctly to the component arc variable
  };
}
...