Typescript d3v4：选择笔刷控制柄会中断笔刷功能

我正在尝试向brushY添加一些自定义功能。目标是使笔刷的范围显示为其相应控制柄正上方/下方的文本。为了实现这一点，我选择句柄[$n，$s]=[$brush.select.handle-n，$brush.select.handle-s]以获得它们各自的y属性，用于文本的定位

然而，我发现通过选择手柄，画笔的功能变得很糟糕。。。您将失去从控制柄拖动的能力，控制柄的宽度将减小，并且两个控制柄将沿彼此的侧面定位到笔刷的顶部，而不是其常规的北/南位置

有人能解释为什么一个简单的选择会导致这种DOM突变吗

相关代码：

私有plotBrushText$：d3Selection:d3Selection{ const$brushHandleText=$.appendg.attrclass，句柄文本； $brushHandleText.appendtext.attrclass，handle-text-n； $brushHandleText.appendtext.attrclass，handle-text-s； } 私有updateBushTextCol:InUserColumn:void{ 常量[上界，下界]=列状态范围； const$col=d3。选择“[id=${col.name}]”， $brush=$col.select.brush， $ticks=$col.selectAll.tick， //[$n，$s]=[$brush.select.handle-n，$brush.select.handle-s]， //[nY，sY]=[attrY$n，attrY$s]， [nY，sY]=[120100]， hideIf=x=>x？隐藏：空， diffLessThan10=fp.diffnY，sY<10， updateText=sel:string，y:number，txt:number=>$col.selectsel .艾特里 .attrx，$ticks.selecttext.attrx .texttxt.toFixed2 .attrvisibility，隐藏不确定10； updateText.handle-text-n，nY+7，上限； updateText.handle-text-s，sY-7，lowerBound； $ticks.transition.duration300.attrvisibility，hideIf！diffLessThan10； } private plotColumnscolumns:IColumn[]：d3Selection{ 返回此项。$$。选择All.column .数据列 .enter.appendg .attrid，c=>c.name .attrclass，c=>`${c.type.toLowerCase}列轴` .attrtransform，c=>`translate${this.xScalec.name}` .eachfunctioncol:IColumn{ d3.选择this.calld3.axisLeftcol.scale； }.callthis.PlotBrush.bindthis .callthis.plotBrushText/<-相关代码 .callthis.PlotAxisMenu.bindthis .callthis.bindTicketEvents.bindthis； } 私有createColumnBrushYGenerator_objMethods:Brush{ 常数{ 更新路径可见性， 前景,， 更新文本， updateExtentState， 一开始， _大小 }=_objMethods； 返回d3.brushY .范围[ [-8, 0], [8，_size.h] ] .开始，开始 .onbrush，函数col{ updateExtentStatecol； updateBushTextCol；//<-相关代码 updatePathVisibilityfg； };

---

}我找到了我最终目标的解决方案。d3.event.selection包含一个元组，类似于选择笔刷句柄以获取其y属性。相反，使用它允许我实现该功能。然而，这并不能回答。。。为什么一个简单的选择会导致这种DOM变异。我找到了一个解决我最终目标的方法。d3.event.selection包含一个元组，类似于选择笔刷句柄以获取其y属性。相反，使用它允许我实现该功能。然而，这并不能回答。。。为什么一个简单的选择会导致这种DOM突变。