为什么在单独的函数(D3)中应用转换时会闪烁/结巴
为什么在单独的函数(D3)中应用转换时会闪烁/结巴
提问于 2016-05-18 18:51:39
当转换被应用到不同的函数中时，我注意到一些口吃和闪烁。但是，如果转换与方法链接一起应用，则它完全按照规定工作。
下面是简单移动一些文本的小示例(小提琴)。第一个最左边的字符串在转换开始之前神奇地向下传送页面。第二个，最右边的字符串，从页面的顶部到底部有一个平滑的过渡。
为什么会发生这种“传送”？显然，将转换应用于一个单独的函数并不等于将其链接起来，但是有什么方法可以实现这一点吗？比方说，我想将同样的转换应用于许多不同的对象--从不同的选择中检索--那么，是否有一种方法可以将转换降级到它自己的函数，而不让它结结巴巴呢？
var svg = d3.select('svg');
var textElem = svg.append('text')
.data(['hello world'])
.attr('x', 30)
.attr('y', 100)
.attr('fill', '#000')
.attr('id', 'a')
.text(function (d) {
return d;
});
var textElem2 = svg.append('text')
.data(['some text'])
.attr('x', 230)
.attr('y', 100)
.attr('fill', '#000')
.attr('id', 'a')
.text(function (d) {
return d;
});
setTimeout(foo, 3000);
function foo() {
textElem.data(['hello world, again!']);
applyTextTransitions(textElem);
textElem.attr({
x: 30,
y: 150
});
textElem.text(function (d) {
return d;
});
textElem2.data(['some more text!'])
.transition()
.duration(1000)
.style('opacity', 0)
.transition()
.duration(1000)
.style('opacity', 1)
.attr({
x: 230,
y: 150
})
.text(function (d) {
return d;
});
}
function applyTextTransitions(element) {
element
.transition()
.duration(1000)
.style('opacity', 0)
.transition()
.duration(1000)
.style('opacity', 1);
}Stack Overflow用户
回答已采纳
发布于 2016-05-18 19:16:52
我没有使用d3，但你是有意这么做的吗？
applyTextTransitions(textElem, { x: 30, y: 150 });
function applyTextTransitions(element, newPos) {
element
.transition()
.duration(1000)
.style('opacity', 0)
.transition()
.duration(1000)
.attr(newPos)
.style('opacity', 1)
.text(function(d){
return d;
});
}https://jsfiddle.net/k8kv4arv/3/
发生“跳转”是因为调用函数等待applyTextTransitions()完成，然后应用新的维度。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37307901
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号