javascript - 悬停(从 .ease(d3.easeBounceOut) 迁移到 .ease ("easeBounceOut"))

Question

我正在尝试将 d3.js v5 中的代码转换为 d3.js 的版本 3。我尽一切可能将原始代码转换为

版本 5:

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

到版本 3。

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

我希望获得与版本 5 完全相同的结果，但目前悬停效果对我不起作用。我做错了什么？ 非常感谢。

这是版本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();

在v3版本中:

基本上我对函数的第三个属性有问题(g 总是 0):

function(d,i,){ }

因此在出现第三个属性g的地方，我把它删掉了，我会一直全局设置g的值。

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

我已经改变了

的动画

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

到

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

Answer 1

My plunker它没有正确引用选择。我将 d3.select(g[i]) 更改为 d3.select(this) 并且因为 easeBounceOut doesn't seem to exist in v3 ，我将其更改为 bounce。

Fiddle这是一个带有无限过渡的单个圆圈的 fiddle 。使用“递归”函数，在转换结束后调用自身。