我目前有一个动画，其中我向每个圆圈添加一个发出的动画，但我无法向每个动画添加更多圆圈。我想要这样的效果:
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/
非常感谢。
最佳答案
你的整个emanting函数可以简单地写成:
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>关于javascript - 在 d3.js 中向我的散发动画添加更多圆圈，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49390459/