Javascript D3JS图表：将鼠标悬停在某些正在转换的元素上，而其他元素仍在转换中，会停止图表动画的执行

我一直在做水平条形图。我将

transition

添加到

rect

s的

width

attr中，从0添加到所需的值，效果很好。然后我添加了一些

circle

元素，并使用

delay

让它们一个接一个地“出现”，将

r

属性从0变为所需的

r

值，一切都很顺利。如果在所有元素都完成转换之前我不将鼠标悬停在任何元素上，则可视化效果与预期一样

rect

s和

circle

s都以不同的延迟在

width

和

r

属性之间移动，这使得其中一些属性显示在其他属性之前

问题：如果我将鼠标悬停在任何

rect

上，而其他元素尚未完成其转换，则所有元素都会突然停止转换其属性。因此，整个图表所期望的最终状态没有达到，实际上它变得一团糟。我不明白为什么将鼠标悬停在一个元素上会干扰其他“显然”独立元素的预期行为

函数绘图（）{
变量宽度=$（窗口）.width（）；
变量高度=document.body.clientHeight；
风险值数据=[
{国家：“Pichonita”，增长：15}，
{国家：“仙女座”，增长：12}，
{国家：“印度”，增长：33}，
{国家：“印度尼西亚”，增长：22}，
{国家：“俄罗斯”，增长：6}，
{国家：“火星”，增长：41}，
{国家：“深成岩体”，增长：16}，
{国家：“地球”，增长：24}，
{国家：“海王星”，增长：8}
]; 
//设置边距
var-margin={顶部：30，右侧：30，底部：30，左侧：40}；
变量宽度=宽度-边距。左侧-边距。右侧*2.5；
变量高度=高度-margin.top-margin.bottom；
//设置刻度和范围
var xScale=d3.scaleLinear（）
.范围（[0，宽度-100]）
var yScale=d3.scaleBand（）
.范围（[0，高度]）.填充（.2）
//绘制svg
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧*3）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（“+margin.left*2+”，“+margin.top+”）
//部队数据
data.forEach（函数（d）{
回报率d.growth=+d.growth；
});
//设置域
yScale.domain（data.map（d=>d.country））
域（[0，d3.max（数据，d=>d.growth）]）
//添加X轴和Y轴，并将条附加到Y轴
var xAxis=svg.append（“g”）
.attr（“类”，xAxis）
.attr（“变换”、“平移”（“+0+”，“+height+”）
.call（d3.axisBottom（xScale））
var yAxis=svg.append（“g”）
.attr（“类”，yAxis）
.call（d3.axisLeft（yScale））
.selectAll（“rect”）
.数据（数据）
.输入（）
.append（“rect”）
.attr（“笔划”、“透明”）
.attr（“笔划宽度”，4）
.on（“mouseover”，function（）{d3.select（this）.transition（）.duration（600）.attr（“stroke”），attr（“stroke width”，3）.style（“fill”，“6D2077”）
d3.选择全部（“.textcirle”）.transition（）.持续时间（600）
.attr（“r”，yScale.bandwidth（）/1.9）
.attr（“笔划”，“#6D2077”）
.attr（“笔划宽度”，1）
}) 
.on（“mouseout”，function（）{d3.select（this）
.transition（）
.持续时间（600）
.attr（“笔划”、“透明”）
.attr（“笔划宽度”，0）
.样式（“填充”、“#00338D”）
d3.选择全部（“.textCircle”）
.transition（）.持续时间（600）
.attr（“r”，yScale.bandwidth（）/2）
.attr（“笔划”、“透明”）
}) 
.attr（“类”、“条”）
.attr（“高度”，yScale.bandwidth（））
.attr（“x”，0.5）
.attr（“y”，函数（d）{
返回yScale（d.国家/地区）
})
.attr（“宽度”，0）
.transition（）
.持续时间（3800）
.延迟（（d，i）=>（i+1）*200）
.轻松（d3.轻松弹性）
.attr（“宽度”，函数（d）{
回报率xScale（d.growth）
})
.样式（“填充”、“#00338D”）
var newG=svg.append（“g”）
新建。选择全部（“圆形”）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“类”、“文本圈”）
.attr（“cx”，d=>xScale（d.growth））
.attr（“cy”，d=>yScale（d.country）+yScale.bandwidth（）/2）
.attr（“r”，0）
.transition（）
.持续时间（1200）
.延迟（（d，i）=>（i+1）*450）
.attr（“r”，yScale.bandwidth（）/2）
.attr（“不透明度”，1）
.style（“填充”，“#0091DA”）
.attr（“笔划”、“透明”）
}
draw（）；
$（窗口）。调整大小（函数（）{
$（“body”）.empty（）；
draw（）；
});
html{
身高：98%；
保证金：0；
填充：0；
}
身体{
最小高度：98%；
保证金：0；
填充：0；
}
svg{
文本呈现：几何精度；
形状渲染：几何精度；
}
事情变得一团糟，因为您添加了
mouseover
和
mouseout
事件侦听器，试图执行与正在进行的转换事件冲突的操作。要解决此问题，请在图表栏执行初始转换之前，不要添加
鼠标悬停
/
鼠标悬停
侦听器。您可以使用
transition.on（'end'，function（）{…}
为转换结束添加侦听器，然后在转换完成后将鼠标事件侦听器添加到DOM元素

    d3.select('#whateverItIs')
    // stuff to do prior to transition
    .transition()
    // transition stuff
    .on('end', function() {
      d3.select(this)
        .on("mouseover", function() {
        // handler code here
        })
        .on("mouseout", function() {
        // handler code here
        })
    })

使用您的代码：


函数绘图（）{
变量宽度=$（窗口）.width（）；
变量高度=document.body.clientHeight；
风险值数据=[{
国家：“皮霍尼塔”，
增长：15
},
{
国家：“仙女座”，
增长：12
},
{
国家：“印度”，
增长：33
},