如何解决d3-transition v2:错误:找不到过渡1
我尝试将现有组件从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('....')
的某个位置插入,但是不确定在链的哪个阶段以及选择什么。
任何帮助将不胜感激。
解决方法
就我而言,问题在于过渡重用。我认为它可以声明一次并反复使用。 转换不可重用,必须使用工厂。
当过渡结束时,它不可用。在这种情况下,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);
,
我以为自己面临死胡同,所以我打开了一个issue,原来是我的坏?,这是一个支持请求。
我的解决方案中有两件事需要解决:
- 不从过渡
t
继承,因为不需要它 - 将我的导入
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',line);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。