Javascript D3在正在进行的转换期间停止交互

我注意到D3API中的部分，并尝试将其应用到我的代码中。我的最终目标是避免任何“鼠标移动”、“鼠标移动”、“点击”。。等。只要transition（）仍在进行，就可以进行交互

该代码段显示3个节点，它们在“mouseenter”事件后交换颜色问题是，如果我在“mouseenter”事件中中断正在进行的转换，颜色将变回白色。我怎样才能避免这种行为

应用尝试后，我收到的

await仅在异步函数和异步生成器中作为错误有效



D3v6转换示例
身体{
背景色：rgb（220、220、220）；
溢出：隐藏；
边际：0px；
}
.节点{
笔画：白色；
笔画宽度：2px；
光标：指针；
}
.节点：悬停{
笔画：红色
}
.链接{
填充：无；
游标：默认值；
笔划：rgb（0,0,0）；
笔画宽度：3px；
}
变量图={
“节点”：[
{
“id”：0，
},
{
“id”：1，
},
{
“id”：2，
}
],
“链接”：[
{
“来源”：0，
"目标":一,，
},
{
“来源”：1，
"目标":二,，
},
{
“来源”：2，
“目标”：0，
}
]
}
var width=window.innerWidth
var height=window.innerHeight
var svg=d3.选择（“svg”）
.attr（“类”、“画布”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.call（d3.zoom（）.on（“zoom”），函数（事件）{
attr（“transform”，event.transform）
}))
.附加（“g”）
//删除dblclick侦听器上的缩放
d3.选择（“svg”）。打开（“dblclick.zoom”，null）
var linkContainer=svg.append（“g”）.attr（“class”，“linkContainer”）
var nodeContainer=svg.append（“g”）.attr（“class”，“nodeContainer”）
var-isRed=false；
var simulation=d3.forceSimulation（）
.force（“link”，d3.forceLink（）.id（函数（d）{
返回d.id；
}).距离（100））
.力（“电荷”，d3.力人体（）.力（-500））
.力（“中心”，d3.力中心（宽度/2，高度/2））
.力（“碰撞”，d3.力碰撞（）.半径（50））
初始化（）
函数初始化（）{
link=linkContainer。选择全部（“.link”）
.数据（图表.链接）
.加入（“行”）
.attr（“类”、“链接”）
节点=节点容器。选择全部（“.node”）
.data（graph.nodes，d=>d.id）
.加入（“g”）
.attr（“类”、“节点”）
node.selectAll（“圆圈”）
.数据（d=>[d]）
.加入（“圈”）
.attr（“r”，30）
.style（“填充”、“白烟”）
.on（“mouseenter”，mouseenter）
node.selectAll（“文本”）
.数据（d=>[d]）
.join（“文本”）
.style（“类”、“图标”）
.attr（“字体系列”、“字体风格”）
.attr（“主要基线”、“中心”）
.attr（“文本锚定”、“中间”）
.attr（“字体大小”，30）
.attr（“填充”、“黑色”）
.attr（“笔划宽度”，“0px”）
.attr（“指针事件”、“无”）
.文本（（d）=>{
返回d.id
})
模拟
.nodes（图.nodes）
。在（勾选）上；
模拟
.force（“链接”）
.links（graph.links）
}
功能鼠标指针（d）{
如果（！isRed）{
d3.选择（本）
.transition（）
.持续时间（1500）
.样式（“填充”、“红色”）
isRed=true
}否则{
d3.选择（本）
.transition（）
.持续时间（1500）
.style（“填充”、“白烟”）
isRed=false
}
}
函数勾选（）{
//更新链接位置
链接
.attr（“x1”，函数（d）{
返回d.source.x；
})
.attr（“y1”，函数（d）{
返回d.source.y；
})
.attr（“x2”，函数（d）{
返回d.target.x；
})
.attr（“y2”，功能（d）{
返回d.target.y；
});
//更新节点位置
节点
.attr（“转换”，函数（d）{
返回“translate”（“+d.x+”，“+d.y+”）；
});
}
有几种方法可以做到这一点，比如使用标志。然而，最惯用的D3只是检查元素是否具有，其简单程度如下：

if(d3.active(this)) return;

以下是更改后的代码：



D3v6转换示例
身体{
背景色：rgb（220、220、220）；
溢出：隐藏；
边际：0px；
}
.节点{
笔画：白色；
笔画宽度：2px；
光标：指针；
}
.节点：悬停{
笔画：红色
}
.链接{
填充：无；
游标：默认值；
笔划：rgb（0,0,0）；
笔画宽度：3px；
}
变量图={
“节点”：[{
“id”：0，
},
{
“id”：1，
},
{
“id”：2，
}
],
“链接”：[{
“来源”：0，
“塔尔