d3转换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函数(链中的函数(用于在参数中的函数无效的情况下加载默认转换，现在它出错了。

现在正确的解决方案是使用过渡工厂

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