Блог

Главная - Вопросы по программированию - d3-переход v2: Ошибка: переход 1 не найден

d3-переход v2: Ошибка: переход 1 не найден

#javascript #d3.js

#javascript #d3.js

Вопрос:

Я пытаюсь перенести существующий компонент с d3-transition версии v1.3.2 на версию v2.0.0, но во время выполнения получаю следующую ошибку: Error: transition 1 not found

Мой код следующий:

 const t = transition();

const section = this.svg.selectAll('.area').data([data], (d) => {
    return this.y(d.value);
});

section
      .enter()
      .append('path')
      .merge(section)
      .transition(t)
      .duration(this.animationDuration)
      .ease(easeLinear)
      .attr('class', 'area')
      .attr('d', line);

Если я удалю переход, диаграммы будут отображаться правильно. Я понимаю, что мне, вероятно, следует подключить где-то selectAll('....') , но я не уверен, на каком этапе цепочки и что выбрать.

Буду признателен за любую помощь 🙏.

Ответ №1:

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

Когда переход заканчивается, он становится недоступным. transition функция (та, что в цепочке) в таком случае использовалась для загрузки перехода по умолчанию, если параметр one in был недействительным, теперь он выдает ошибку.

Правильное решение сейчас — использовать фабрику переходов

 // there's nothing wrong with this import
import {transition} from 'd3-transition';
function getTransition() {
    return transition()
      .duration(1000)
      .ease(easeLinear)
}

const section = this.svg.selectAll('.area').data([data], (d) => {
    return this.y(d.value);
});

section
      .enter()
      .append('path')
      .merge(section)
      .transition(getTransition())
      // .duration(this.animationDuration) // now duration
      // .ease(easeLinear)
      .attr('class', 'area')
      .attr('d', line);

Комментарии:

1. observablehq.com/@d3/selection-join В этом примере повторно используется переход, но я получаю ошибку «не найдено», если повторно использую переход в своем коде, и ваше решение сработало для меня. Спасибо.

2. @YooMatsuo в более старых версиях было «возможно» повторно использовать переходы. Почему? Поскольку после того, как переход был использован и стал нулевым, существовал механизм возврата к переходу по умолчанию. Это может привести к неожиданному неправильному поведению кода. Теперь он выдает ошибку, чтобы убедиться, что код написан правильно.

Ответ №2:

Я думал, что столкнулся с тупиком, поэтому я открыл проблему, которая, как оказалось, была запросом в службу поддержки, моя ошибка 😅.

В моем решении нужно было исправить две вещи:

  1. не наследуется от перехода t , потому что он не был нужен
  2. изменение моего импорта import {transition} from 'd3-transition'; на import 'd3-transition'; , иначе переход без t не был бы найден

Применяется к коду моего вопроса:

 import 'd3-transition'; // <--- 1. import modiffied
 
const section = this.svg.selectAll('.area').data([data], (d) => {
    return this.y(d.value);
});

section
      .enter()
      .append('path')
      .merge(section)
      .transition() // <--- 2. not inheriting t
      .duration(this.animationDuration)
      .ease(easeLinear)
      .attr('class', 'area')
      .attr('d', line);