Question

我目前有一个动画，我在其中为每个圆圈添加了一个发散动画，但是我无法在每个动画中添加更多圆圈。我希望有这样的效果：

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

其中有几个圆圈执行无限动画的动画无限且永不结束。（感谢@Mark）

这是我当前的代码，我在其中创建了另一个圆形实例，我正在尝试重新创建这个动画无限动画，并在其中发出更多圆圈。我怎么能这样做？

    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);
  }

https://jsfiddle.net/k4zugL7u/1/

非常感谢你。

Answer 1

您的整个emananting函数可以简单地写为：

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
    }); 
}

运行代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style type="text/css">
    /* On mouse hover, lighten state color */
    
    path:hover {
      fill-opacity: .7;
    }
    /* Style for Custom Tooltip */
    
    div.tooltip {
      position: absolute;
      text-align: center;
      width: 60px;
      height: 28px;
      padding: 2px;
      font: 12px sans-serif;
      background: white;
      border: 0px;
      border-radius: 8px;
      pointer-events: none;
    }
    
    .cirle_animation {
      fill: none;
      stroke: red;
    }
    /* Legend Font Style */
    
    body {
      font: 11px sans-serif;
    }
    /* Legend Position Style */
    
    .legend {
      position: absolute;
      left: 800px;
      top: 350px;
    }
  </style>
</head>

<body>
  v5
  <div id="circles" style="width:100%; height:100%x; border: 2px solid blue"></div>
  <script type="text/javascript">
  
    CircleNumber = Math.round(15)
    const svg = d3.select("body").append("svg").attr("width", 500).attr("height", 500);
    const data = Array.from(Array(CircleNumber).keys());

    function emananting() {
      var n = 0;
      points.selectAll('circle.emanting')
        .attr('r', 20)
        .style('opacity', 1)
        .transition()
        .each(function() { ++n; })
        .duration((d, i) => {
          return 5000;
        })
        .delay((d, i) => {
          return i * 1000;
        })
        .attr('r', 50)
        .style('opacity', 0)
        .on("end", function() { 
           if (!--n) emananting(); 
        }); 
    }
    
    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', 500)
      .attr('height', 500)
      .attr('x', 0)
      .attr('y', 0)
      .attr('fill', 'black')
      .attr('opacity', 0.5);
    
    var masterData = d3.range(0,10).map(() => {
      return {
        x: Math.random() * 500,
        y: Math.random() * 500
      }; 
    });
    
    var points = svg.selectAll(".point")
      .data(masterData)
      .enter()
      .append("g")
      .attr("class", "point")
      .attr("transform", (d) => {
        return "translate(" + [d.x, d.y] + ")";
      });
    
    // Outer 
    points.append("circle")
      .classed('OuterCircle', true)
      .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
    points.append('circle')
      .classed('InnerCircle', true)
      .attr('r', 20)
      .attr('stroke', 'yellow')
      .attr('fill', 'yellow')
      .attr('opacity', 1)
      .on('mouseover', (d, i, g) => {
        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)
      });

    points.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);

    emananting();
  </script>
</body>

</html>

在d3.js中为我的emananting动画添加更多圆圈

1 个答案: