Javascript 从5迁移到5很复杂3@yavg，我用如何使用d3数据联接添加多个数据点的示例更新了我的答案。谢谢！我必须将v5的这一部分翻译成v3。谢谢大家!@yavg，我认为你需要的唯一翻译是，。在（“结束”，function（）{变成。每个（“结束”，function

---

从5迁移到5很复杂3@yavg，我用如何使用

d3

数据联接添加多个数据点的示例更新了我的答案。谢谢！我必须将v5的这一部分翻译成v3。谢谢大家!@yavg，我认为你需要的唯一翻译是，

。在（“结束”，function（）{

变成

。每个（“结束”，function（）{

）都是这一行d3。在v3到d3中选择（g[I]）.transition（）.ease（d3.easeBounceOut）。选择（this）。transition（）。ease（“bounce”）？不适合我：(

    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)); // pass in a emananting function
      emanatingCircles[index].attr("opacity", 1);
  } 

function emananting() {
  var n = 0; // counter of how many transitions
  svg.selectAll('circle.emanting')
    .attr('r', 20) // set initial radius
    .style('opacity', 1) // and opacity
    .transition()
    .each(function() { ++n; }) // increment counter for each transition
    .duration((d, i) => {
      return 5000;
    })
    .delay((d, i) => {
      return i * 1000;
    })
    .attr('r', 50)
    .style('opacity', 0)
    .on("end", function() { 
       if (!--n) emananting(); // when all transitions end, restart emananting
    }); 
}