hovering (migration of .ease(d3.easeBounceOut) to .ease("easeBounceOut"))

Question

I am trying to convert a code made in d3.js v5 to version 3 of d3.js. I do everything possible to convert the original code made in

version 5:

http://plnkr.co/edit/w8v0Iz6Fg3rJTyxeXKca?p=preview

to version 3.

http://plnkr.co/edit/NjQFVtDHhglt1NT4sn5s?p=preview

I would like to have exactly the same result as version 5, but currently the hovering effect does not work for me. I am doing something wrong?. thank you very much.

this is the code of version 5.

    CircleNumber=Math.round(15)
    const svg = d3.select("body").append("svg").attr("width",250).attr("height",250);
    const data = Array.from(Array(CircleNumber).keys());


    function emananting(){
              console.log('emanting!!')
                svg.selectAll('circle.emanting')
                 .each((d,i,g)=>{
                   console.log(d,i,g)
                  let index = i;
                  d3.select(g[i])
                    .transition()
                  .duration((d,i)=>{
                       return 5000;
                     })
                    .delay((d,i)=>{
                       return index*1000; 
                      })
                  .attr('opacity',0)
                  .attr('r',50).remove();
                });
    }
    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");
    //background
      svg.append('rect')
         .classed('background', true)
         .attr('width', 200)
         .attr('height', 200)
         .attr('x', 25)
         .attr('y', 25)
         .attr('fill', 'black')
         .attr('opacity', 0.5);
    // Outer 
    svg.append("circle")
       .classed('OuterCircle', true)
       .attr("cx",125)
       .attr("cy",125)
       .attr("r",40)
       .attr("fill","url(#radial-gradient)")
       .attr('gradient',()=>{return })
       .attr("stroke","orange")    
       .on('mouseover',(d,i,g)=>{
         console.log(g)
            d3.select(g[i]).transition().ease(d3.easeBounceOut).duration(500).attr("r",60)
         })
       .on('mouseout', (d,i,g)=>{
           d3.select(g[i]).transition().ease(d3.easeBounceOut).duration(500).attr("r",40)
         });
    // Inner
    svg.append('circle')
       .classed('InnerCircle',true)
       .attr('r',20)
       .attr('stroke','yellow')
       .attr('fill','yellow')
       .attr('opacity',1)
       .attr('cx',125)
       .attr('cy',125)
       .on('mouseover',(d,i,g)=>{
            console.log('outercircle');
            console.log(g[i]);
            d3.select(g[i]).transition().ease(d3.easeBounceOut).duration(500).attr("r",35)
         })
       .on('mouseout', (d,i,g)=>{
           d3.select(g[i]).transition().ease(d3.easeBounceOut).duration(500).attr("r",20)
         });

    svg.selectAll('circle.emanting')
                    .data(data)
                .enter()
                .append('circle')
                .attr('class','emanting')
                    .attr('id', (d,i)=>{
                        return 'number' + i;
                                    })
                .attr('r',20)
                .attr('stroke','yellow')
                .attr('fill','none')
                    .attr('opacity',1)
                .attr('stroke-width',2)
                .attr('cx',125)
                .attr('cy',125);

    emananting();

In the versión of v3:

basically I have problems with the third attribute of the functions (g is always 0):

function(d,i,){ }

therefore where the third attribute g appears, I deleted it and I will always set the value of g globally.

var g=svg.selectAll('circle.emanting')[0]

and I have changed the animations of

d3.select(g[i]).transition().ease(d3.easeBounceOut).duration(500).attr("r",60)

to

d3.select(g[i]).transition().ease("easeBounceOut").duration(500).attr("r",35)

Answer 1

My plunker It wasn't referencing the selection correctly. I changed d3.select(g[i]) to d3.select(this) and since easeBounceOut doesn't seem to exist in v3, I changed it to bounce.

Fiddle Here is a fiddle with a single circle that transitions indefinitely. Uses a "recursive" function, that calls itself after the transition is over.