Question

我试图模仿这段代码让它在plnkr中运行，我无法做到。我究竟做错了什么？非常感谢你。这是原始来源的链接。

https://beta.observablehq.com/@weitinglin/demo-how-can-i-make-the-animation-of-a-circle-continous-with-h

这是我的代码：

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

  { 
    input = DOM.range(1,20)
    inputNumb = Generators.input(input)
    CircleNumber=Math.round(inputNumb)
    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)=>{
                  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)=>{
            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();

    return svg.node();

  }

Answer 1

Plunker这是正常的。我用

删除了顶部

input = DOM.range(1,20)
inputNumb = Generators.input(input)
CircleNumber=Math.round(inputNumb)

并更改了CircleNumber = Math.round(15)。这个数字可以是任何东西，我删除的行只生成一个随机数。我还从代码底部删除了一个无用的return。

在plnkr中重现observablehq.com的示例

1 个答案: