Javascript 我怎样才能使一个圆圈的动画像d3.js中的gif一样连续悬停？
我是d3.js的新手。这是我非常喜欢的圆形动画。这就像是一个无限的动画 我想复制这个动画，在d3.js中生成它，但我认为我的知识还不够，这段代码是我能够复制的最接近动画的代码 然后我的想法是，我可以有一个鼠标悬停的效果，你可以在图片中看到。我怎么做？多谢各位 这是我的代码，这是我当前的结果：Javascript 我怎样才能使一个圆圈的动画像d3.js中的gif一样连续悬停？,javascript,d3.js,Javascript,D3.js,我是d3.js的新手。这是我非常喜欢的圆形动画。这就像是一个无限的动画 我想复制这个动画，在d3.js中生成它，但我认为我的知识还不够，这段代码是我能够复制的最接近动画的代码 然后我的想法是，我可以有一个鼠标悬停的效果，你可以在图片中看到。我怎么做？多谢各位 这是我的代码，这是我当前的结果： 这是学习d3.transition功能的好例子。 比如@AndrewReid的引用和你的代码已经在那里了 在您的代码中（如果我理解正确的话），您可以通过更新圆半径的数据直接产生放射效果，并通过选择组编号
这是学习d3.transition功能的好例子。 比如@AndrewReid的引用和你的代码已经在那里了
在您的代码中（如果我理解正确的话），您可以通过更新圆半径的数据直接产生放射效果，并通过选择组编号直接控制每个圆的生命周期 实际上，您可以直接使用d3.transition属性来控制循环过渡生命周期，以产生电子对抗效果 这里有一些d3.transition生命周期的阅读材料：
这是我的代码：
在我的实现中，我使用数据来确定Emanting圈的编号和 使用transition.on侦听每个完成的转换周期并重置属性
//DOM.svg is the syntax in observablhq, in browser, replace with your way
const svg = d3.select(DOM.svg(250,250));
const data = Array.from(Array(CircleNumber).keys());
// use this emanating function to control the execution cycles
function emananting(num){
svg.selectAll('circle.emanting')
.transition()
.duration((d,i)=>{
return 2500;
}) // duration to control each circle emananting duration
.delay((d,i)=>{
return i*500;
}) // delay to control between each circle's space
.attr('opacity',0)
.attr('r',50)
.on('end',(d,i,g)=>{
// after each transition end, trigger these codes
d3.select(g[i])
.attr('r', 10)
.attr('opacity',1);
// control flow from listening to the last transition done!
// remove the num < 10 condition , it will be infinite
if (i===5 && num < 2){
console.log(num);
emananting(num+1);
}
});
}
// Here create the center circle body
svg.append('circle')
.classed('CircleBody',true)
.attr('r',10)
.attr('stroke','yellow')
.attr('fill','orange')
.attr('opacity',1)
.attr('cx',125)
.attr('cy',125);
// Here create the emanting circle
svg.selectAll('circle.emanting')
.data(data)
.enter()
.append('circle')
.attr('class','emanting')
.attr('id', (d,i)=>{
return 'number' + i;
})
.attr('r',10)
.attr('stroke','orange')
.attr('fill','none')
.attr('opacity',1)
.attr('cx',125)
.attr('cy',125);
// control flow
emananting(0);
//DOM.svg是ObservableHQ中的语法，在浏览器中，替换为您的方式
const svg=d3.select（DOM.svg（250250））；
const data=Array.from（Array（CircleNumber.keys（））；
//使用此发射功能控制执行周期
函数emananting（num）{
svg.selectAll（'circle.emanting'））
.transition（）
.持续时间（（d，i）=>{
返回2500；
})//控制每个循环的持续时间
.延迟（（d，i）=>{
返回i*500；
})//延迟控制每个圆的空间
.attr（'opacity'，0）
.attr（'r'，50）
.on（'end'，（d，i，g）=>{
//每次转换结束后，触发这些代码
d3.选择（g[i]）
.attr（'r'，10）
.attr（'opacity'，1）；
//从监听到上一次转换完成的控制流！
//删除num<10的条件，它将是无限的
如果（i==5&&num<2）{
console.log（num）；
emananting（num+1）；
}
});
}
//在这里创建中心圆主体
append（'circle'）
.classed（'CircleBody'，true）
.attr（'r'，10）
.attr（'stroke'，'yellow'）
.attr（'fill'，'orange'）
.attr（'opacity'，1）
.attr（'cx'，125）
.attr（'cy'，125）；
//在这里创建Emating循环
svg.selectAll（'circle.emanting'））
.数据（数据）
.输入（）
.append（'圆'）
.attr（'class'，'emanting'））
.attr（'id'，（d，i）=>{
返回'number'+i；
})
.attr（'r'，10）
.attr（'stroke'，'orange'）
.attr（'fill'，'none'）
.attr（'opacity'，1）
.attr（'cx'，125）
.attr（'cy'，125）；
//控制流
伊曼宁（0）；
这是学习d3.transition功能的好例子。 比如@AndrewReid的引用和你的代码已经在那里了
在您的代码中（如果我理解正确的话），您可以通过更新圆半径的数据直接产生放射效果，并通过选择组编号直接控制每个圆的生命周期 实际上，您可以直接使用d3.transition属性来控制循环过渡生命周期，以产生电子对抗效果 这里有一些d3.transition生命周期的阅读材料：
这是我的代码：
在我的实现中，我使用数据来确定Emanting圈的编号和 使用transition.on侦听每个完成的转换周期并重置属性
//DOM.svg is the syntax in observablhq, in browser, replace with your way
const svg = d3.select(DOM.svg(250,250));
const data = Array.from(Array(CircleNumber).keys());
// use this emanating function to control the execution cycles
function emananting(num){
svg.selectAll('circle.emanting')
.transition()
.duration((d,i)=>{
return 2500;
}) // duration to control each circle emananting duration
.delay((d,i)=>{
return i*500;
}) // delay to control between each circle's space
.attr('opacity',0)
.attr('r',50)
.on('end',(d,i,g)=>{
// after each transition end, trigger these codes
d3.select(g[i])
.attr('r', 10)
.attr('opacity',1);
// control flow from listening to the last transition done!
// remove the num < 10 condition , it will be infinite
if (i===5 && num < 2){
console.log(num);
emananting(num+1);
}
});
}
// Here create the center circle body
svg.append('circle')
.classed('CircleBody',true)
.attr('r',10)
.attr('stroke','yellow')
.attr('fill','orange')
.attr('opacity',1)
.attr('cx',125)
.attr('cy',125);
// Here create the emanting circle
svg.selectAll('circle.emanting')
.data(data)
.enter()
.append('circle')
.attr('class','emanting')
.attr('id', (d,i)=>{
return 'number' + i;
})
.attr('r',10)
.attr('stroke','orange')
.attr('fill','none')
.attr('opacity',1)
.attr('cx',125)
.attr('cy',125);
// control flow
emananting(0);
//DOM.svg是ObservableHQ中的语法，在浏览器中，替换为您的方式
const svg=d3.select（DOM.svg（250250））；
const data=Array.from（Array（CircleNumber.keys（））；
//使用此发射功能控制执行周期
函数emananting（num）{
svg.selectAll（'circle.emanting'））
.transition（）
.持续时间（（d，i）=>{
返回2500；
})//控制每个循环的持续时间
.延迟（（d，i）=>{
返回i*500；
})//延迟控制每个圆的空间
.attr（'opacity'，0）
.attr（'r'，50）
.on（'end'，（d，i，g）=>{
//每次转换结束后，触发这些代码
d3.选择（g[i]）
.attr（'r'，10）
.attr（'opacity'，1）；
//从监听到上一次转换完成的控制流！
//删除num<10的条件，它将是无限的
如果（i==5&&num<2）{
console.log（num）；
emananting（num+1）；
}
});
}
//在这里创建中心圆主体
append（'circle'）
.classed（'CircleBody'，true）
.attr（'r'，10）
.attr（'stroke'，'yellow'）
.attr（'fill'，'orange'）
.attr（'opacity'，1）
.attr（'cx'，125）
.attr（'cy'，125）；
//在这里创建Emating循环
svg.selectAll（'circle.emanting'））
.数据（数据）
.输入（）
.append（'圆'）
.attr（'class'，'emanting'））
.attr（'id'，（d，i）=>{
返回'number'+i；
})
.attr（'r'，10）
.attr（'stroke'，'orange'）
.attr（'fill'，'none'）
.attr（'opacity'，1）
.attr（'cx'，125）
.attr（'cy'，125）；
//控制流
伊曼宁（0）；
类似于@