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(this)更改为easeBounceOut，自bounce doesn't seem to exist in v3后，我将其更改为y.values。

Fiddle这是一个无限过渡的单圈小提琴。使用＆＃34;递归＆＃34;函数，在转换结束后调用自身。

悬停（将.ease（d3.easeBounceOut）迁移到.ease（“easeBounceOut”））

1 个答案: