d3.js - 我是 d3.js 的新手,我想做一个连续的过渡但不工作
问题描述
我试图反复循环我的转换,但我不明白代码有什么问题。
我试过使用 ".on('end', repeat) 但它不起作用。这是我的代码......
var edge = d3.selectAll('.edge');
var indexAndEdge = [];
edges.each(function(d, i) {
var thisEdgeCount = this.id.substring(4)
indexAndEdge.push({ //push index you are at, the edge count worked out above and the id
index: i,
count: thisEdgeCount,
id: this.id
})
})
indexAndEdge.sort(function(a, b) {
return a.count - b.count;
});
var count = 0; //set count to 0
function timer() {
setTimeout(function(d) {
if (count < indexAndEdge.length) { //if we havent gone through all edges
d3.select('#' + indexAndEdge[count].id)
.transition()
.duration(4000)
.style('opacity', 0)
.transition()
.duration(5000)
.style('opacity', 1)
.transition()
.duration(6000)
.style('opacity', 2) //select current id from array
count++; //increment count
timer(); //call timer again
}
else {
console.log('repeat') //end
}
}, 1000)
;
}
timer(); //call timer to show paths one by one
</script>
我希望边缘永远持续下去
解决方案
推荐阅读
- performance - Intel Xeon Platinum 8168 CPU 上的 Vmovntpd 指令
- python - 如何在 Python 中使用正则表达式从 url 中提取特定模式?
- pandas - 将熊猫数据框上传到红移 - 关系“sqlite_master”不存在
- python - UnicodeDecodeError:“charmap”编解码器无法解码位置 24 中的字节 0x81:字符映射到
- c# - 在 C# 中的 rabbit Mq 中获取 xDeath 中队列消息的最大重试次数
- jquery - 取消先前的 ajax 调用并在文本发生更改时从头开始
- angular - 试图列出 Firestore 数据库的集合
- android - 是否可以仅允许某个 webview 的明文 HTTP 流量?
- flutter - GestureDetector 内卡片中的图像
- android - PiracyChecker 无法检查应用程序是否从 Google Play 商店安装