D3 солнечные лучи с обновленными данными: несколько переходов по-прежнему щелкают, а не плавно

Question

Этот вопрос основан на очень полезном ответе Ларса Коттоффа на проблему перехода с диаграммой солнечных лучей D3, основанной на различных данных JSON: d3 - солнечные лучи - переход с учетом обновленных данных - попытка анимировать, а не привязать

Я попробовал финальную скрипку, которую предоставил Ларс, но когда происходит более одного перехода, анимация все равно не срабатывает, и мы получаем привязку. Проблема может быть замечена в этой обновленной скрипке, которая содержит второй переход.

Из того, что я могу сказать, x0 а также dx0 значения не сохраняются должным образом с объектом пути при вызове arcTweenUpdate функция. Когда я проверяю, что this объект выглядит как внутри arcTweenUpdate функция, я получаю [объект SVGPathElement] в начале функции, когда this.x0 а также this.dx0 читаются, и я получаю [окно объекта], когда новые значения пишутся позже. Я относительно неопытен с JS, но казалось, что это может указывать на проблему.

Любая помощь в решении этой проблемы и обеспечении работы вышеупомянутой скрипки для нескольких переходов (например, назад и вперед между двумя JSON) высоко ценится. Спасибо!

Answer 1

Ну, вы заметили ошибку в моем предыдущем ответе:)

Проблема, как вы говорите, в том, что сохраненные значения не обновляются должным образом. Это потому что this внутри обратного вызова не относится к path Элемент DOM больше. Исправить просто - сохраните ссылку на this в функции на уровне выше и используйте эту ссылку:

function arcTweenUpdate(a) {
  var i = d3.interpolate({x: this.x0, dx: this.dx0}, a);
  var that = this;
  return function(t) {
    var b = i(t);
    that.x0 = b.x;
    that.dx0 = b.dx;
    return arc(b);
  };
}

Полная демонстрация здесь.