d3-transition v2：错误：未找到转换 1

Question

我尝试将现有组件从d3-transitionv1.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在这种情况下，如果 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);

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