Javascript 创建无限动画的另一个实例时，它将消失

我有一个无限的伊曼宁动画，你可以在这个链接中看到：

我正在尝试创建此动画的多个实例，但当我尝试生成多个实例时，无限动画将消失。我不知道这是否是最好的方法，但我尝试在以下链接中生成同一动画的多个实例：

这是我的代码：

    CircleNumber=Math.round(15)
    const svg = d3.select("body").append("svg").attr("width",250).attr("height",250);
    const data = Array.from(Array(CircleNumber).keys());
            var emanatingCircles=[];
    const radialGradient = svg.append("defs")
                              .append("radialGradient")
                              .attr("id", "radial-gradient");

    radialGradient.append("stop")
                      .attr("offset", "0%")
                      .attr("stop-color", "#f4425f");

    radialGradient.append("stop")
                    .attr("offset", "100%")
                    .attr("stop-color", "orange");
  for(var i=0; i<2; i++){

    // Outer 
    svg.append("circle")
       .classed('OuterCircle', true)
       .attr("id","fuera")
       .attr("cx",50*(i+2))
       .attr("cy",50*(i+2))
       .attr("r",10)
       .attr("fill","url(#radial-gradient)")
       .attr('gradient',()=>{return })
       .attr("stroke","orange")    
       .on('mouseover',function(d,i,g){
         console.log(g)
            d3.select(this).transition().ease("bounce").duration(500).attr("r",13)
         })
       .on('mouseout', function(d,i,g){
           d3.select(this).transition().ease("bounce").duration(500).attr("r",10)
         });
    // Inner
    svg.append('circle')
       .classed('InnerCircle',true)
       .attr('r',5)
       .attr("id","dentro")
       .attr('stroke','yellow')
       .attr('fill','yellow')
       .attr('opacity',1)
       .attr('cx',50*(i+2))
       .attr('cy',50*(i+2))
       .on('mouseover',function(d,i,g){
            console.log('outercircle');
            console.log(g[i]);
            d3.select(this).transition().ease("bounce").duration(500).attr("r",7)
         })
       .on('mouseout', function(d,i,g){
           d3.select(this).transition().ease("bounce").duration(500).attr("r",5)
         });

    emanatingCircles[i] = svg
      .append('circle')
      .attr('class','emanting')
      .attr('r',5)
      .attr('stroke','yellow')
      .attr('fill','none')
      .attr('opacity',1)
      .attr('stroke-width',2)
      .attr('cx',50*(i+2))
      .attr('cy',50*(i+2))


      emananting(i);

  }  


    function emananting(index){
    console.log(index)
            emanatingCircles[index]
         .transition().duration(5000)
              .attr('opacity',0)
              .attr('r',20)
              .transition().duration(0)
              .attr('opacity',0)
              .attr('r',5)
              .each("end", emananting[index]);
      emanatingCircles[index].attr("opacity", 1);
    } 

---

非常感谢

我对您的代码做了一些修改

function emananting(index) {
    console.log(index)
    emanatingCircles[index]
        .transition().duration(5000)
        .attr('opacity', 0)
        .attr('r', 20)
        .transition().duration(0)
        .attr('opacity', 0)
        .attr('r', 5)
        .each("end", (index)=> emanating(index)); // pass in a emananting function
    emanatingCircles[index].attr("opacity", 1);
} 

---

我想你应该把一个函数传递给.eachend

您也可以只执行.each=>EmatingIndex，而不是创建一个完整的包装器函数。我得到了这个错误。。未捕获范围错误：超过最大调用堆栈大小