javascript - d3-过渡 v2 : Error: transition 1 not found

Question

我尝试从 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('....')但我不确定在链条的哪个阶段以及选择什么。
任何帮助将不胜感激🙏。

Answer 1

就我而言，问题在于过渡重用。我认为它可以声明一次并一遍又一遍地使用。 转换不可重复使用，必须使用工厂。
当过渡结束时，它变得不可用。 transition函数(链中的那个)在这种情况下用于加载默认转换，如果参数中的一个无效，现在它会出错。
现在正确的解决方案是使用过渡工厂

// 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);