D3.js v7调用brush行为时站点text标签消失原因咨询

这个异常是SVG的层级渲染规则和D3 brush的默认DOM插入逻辑共同导致的，具体如下：

1. SVG的基础渲染规则：同一个父元素下，后插入的DOM元素层级更高，会覆盖在先插入元素的上方。
2. D3 brush的默认行为：当你调用selection.call(brush)时，brush会自动在选中的目标元素内部插入它所需的DOM结构，包括用于捕获鼠标事件的overlay层、选择框、拖拽手柄等元素。
3. 两种写法的差异：
   • 你直接对svg根元素调用svg.call(brush)时，brush插入的所有元素会被放到svg子元素列表的末尾。而你的mapGroup是在调用brush之前就插入到svg中的，所以brush的元素层级比mapGroup更高，会覆盖在站点内容上方。
   • 如果你没有引入D3官方的brush默认样式，brush的overlay捕获层会继承rect的默认填充属性：纯黑色、低透明度。你的站点rect填充色是较深的#69a3b2，被半透明黑色覆盖后依然可见；但纤细的黑色文本标签被覆盖后对比度大幅下降，视觉上就像消失了一样，这就是你只看到rect看不到text的核心原因。
   • 当你新建单独的g分组挂载brush时，可通过自定义这个g的样式避免覆盖问题：只需给brush的overlay设置fill: none，就可以在保留事件捕获能力的同时不遮挡下层内容。

• 优先选择单独分组挂载brush的方案，避免和根svg的其他行为冲突
• 手动添加brush样式，避免默认填充遮挡内容：

.brush .overlay {
  fill: none;
  cursor: crosshair;
}

• 如果一定要直接给svg挂载brush，调用后手动修改overlay的填充属性即可。

内容的提问来源于stack exchange，提问作者Siddharth Krishnamoorthy