首页 > 解决方案 > 我是 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>

我希望边缘永远持续下去

标签: d3.js

解决方案


推荐阅读