D3.js D3js sunburst图表鼠标悬停/鼠标悬停功能无法100%正常工作

以下是该应用程序的实时版本：

我附上了MouseOver/MouseLeave功能无法正常工作时发生的情况的图片。它应该突出显示悬停在图表上的部分及其所有父对象，但是当您在图表上移动鼠标时，它突出显示了错误的内容

代码如下。请告知如何更改鼠标悬停/鼠标悬停功能，以使其正常工作

d3.json（“https://gist.githubusercontent.com/MargretWG/b3f9e0a383408c6e6a45fc652e83a26c/raw/8756e2320d05a774e96983234beff81b01409315/hierarchy.json）然后（数据=>{
常量分区=数据=>{
const root=d3.层次结构（数据）
.sum（d=>d.size）
.sort（（a，b）=>b.value-a.value）；
返回d3.partition（）
.size（[2*Math.PI，root.height+1]）
（根）；
}
const color=d3.scaleOrdinal（）.range（d3.quantize（d3.interpolateRainbow，data.childrence.length+1））；
常量格式=d3.格式（“，d”）；
常数宽度=974；
常数半径=宽度/6；
恒弧=
d3.arc（）
.startAngle（d=>d.x0）
.端角（d=>d.x1）
.焊盘角度（d=>数学最小值（（d.x1-d.x0）/2,0.005））
.焊盘半径（半径*1.5）
.内半径（d=>d.y0*半径）
.outerRadius（d=>数学最大值（d.y0*半径，d.y1*半径-1））
常量根=分区（数据）；
根。每个（d=>d.current=d）；
const svg=d3.select（'svg'）
.attr（“宽度”，宽度）
.attr（“高度”，宽度）
.style（“字体”，“10px无衬线”）；
常量g=svg.append（“g”）
.attr（“transform”，`translate（${width/2}，${width/2}）`）
.on（“mouseleave”，mouseleave）；
常量路径=g.append（“g”）
.selectAll（“路径”）
.data（root.subjects（）.slice（1））
.enter（）.append（“路径”）
.attr（“填充”，d=>{
而（d.depth>1）d=d.parent；
返回颜色（d.data.name）；
})
.attr（“填充不透明度”，d=>arcVisible（d.current）？（d.children？0.6:0.4）：0）
.attr（“d”，d=>电弧（d.电流））
.on（“mouseover”，mouseover）；
path.filter（d=>d.children）
.style（“光标”、“指针”）
。开启（“点击”，点击）；
路径追加（“标题”）
.text（d=>`${d.祖先（）.map（d=>d.data.name）.reverse（）.join（“/”）}\n${format（d.value）}`）；
常量标签=g.append（“g”）
.attr（“指针事件”、“无”）
.attr（“文本锚定”、“中间”）
.style（“用户选择”、“无”）
.selectAll（“文本”）
.data（root.subjects（）.slice（1））
.enter（）.append（“文本”）
.attr（“dy”，“0.35em”）
.attr（“填充不透明度”，d=>+labelVisible（d.current））
.attr（“转换”，d=>标签转换（d.current））
.text（d=>d.data.name）；
//百分比文本
const percentage_text=svg.append（“文本”）
.attr（“id”、“标题”）
.attr（“x”，（宽度/2））
.attr（“y”，宽度/2））
.attr（“文本锚定”、“中间”）
.style（“字体大小”、“2.5em”）；
const parent=g.append（“圆”）
.基准面（根）
.attr（“r”，半径）
.attr（“填充”、“无”）
.attr（“指针事件”、“全部”）
。开启（“点击”，点击）；
单击函数（p）{
父数据（p.parent | | root）；
root.each（d=>d.target={
x0:Math.max（0，Math.min（1，（d.x0-p.x0）/（p.x1-p.x0））*2*Math.PI，
x1:Math.max（0，Math.min（1，（d.x1-p.x0）/（p.x1-p.x0））*2*Math.PI，
y0：数学最大值（0，d.y0-p.depth），
y1：数学最大值（0，d.y1-p.depth）
});
const t=g.transition（）.持续时间（750）；
//转换所有圆弧上的数据，即使是不可见的圆弧，
//因此，如果此过渡被中断，将开始输入圆弧
//从所需位置的下一个过渡。
路径转换（t）
.tween（“数据”，d=>{
常数i=d3.插值（d.电流，d.目标）；
返回t=>d.current=i（t）；
})
.过滤器（功能（d）{
return+this.getAttribute（“填充不透明度”）| | arcVisible（d.target）；
})
.attr（“填充不透明度”，d=>arcVisible（d.target）？（d.children？0.6:0.4）：0）
.attrween（“d”，d=>（）=>弧（d.电流））；
标签.过滤器（功能（d）{
return+this.getAttribute（“填充不透明度”）| | labelVisible（d.target）；
}).过渡（t）
.attr（“填充不透明度”，d=>+labelVisible（d.target））
.attrTween（“变换”，d=>（）=>标签变换（d.current））；
}
//滑过
const totalSize=root.subjections（）[0]。值；
功能鼠标盖（d）{
风险值百分比=（100*d.value/totalSize）.toPrecision（3）；
var percentageString=百分比+“%”；
如果（百分比<0.1）{
percentageString=“<0.1%”；
}
百分比\文本.text（百分比字符串）；
var sequenceArray=d.concenters（）.reverse（）；
sequenceArray.shift（）；//从数组中删除根节点
//淡出所有片段。
d3.选择全部（“路径”）
.样式（“不透明度”，0.3）；
//然后仅高亮显示当前段的祖先。
g、 选择全部（“路径”）
.filter（函数（节点）{
返回（sequenceArray.indexOf（node）>=0）；
})
.样式（“不透明”，1）；
}
//老鼠叶子
//在移出可视化时，将所有内容恢复为完全不透明度。
鼠标移动功能（d）{
//在转换期间停用所有分段。
//d3.选择所有（“路径”）。打开（“鼠标悬停”，空）；
//将每个片段转换为完全不透明度，然后重新激活它。
d3.选择全部（“路径”）
.transition（）
.持续时间（200）
.style（“不透明度”，1）
.on（“结束”，函数（）{
d3.选择（this）.on（“mouseover”，mouseover）；
});
百分比_text.text（“”）；
}
功能arcVisible（d）{
返回d.y1=1&&d.x1>d.x0；
}
功能标签可视（d）{
返回d.y1=1&（d.y1-d.y0）*（d.x1-d.x0）>0.03；
}
功能标签转换（d）{
常数x=（d.x0+d.x1）/2*180/Math.PI；
常数y=（d.y0+d.y1）/2*半径；
返回`rotate（${x-90}）translate（${y}，0）rotate（${x<180？0:180}）`；
}
});
你做了一些奇怪的事