Javascript d3笔刷的事件传播

我使用d3画笔与自定义处理，以便给我的选择一个伟大的外观。数据的选择工作正常，但控制柄的笔刷移动事件传播有问题。这是图表：

如你所见，自定义句柄是由一个深灰色矩形和中间的3个点组成。在devtools中，句柄如下所示：

问题如下：当我拖动句柄使用栏（ReCt）时，它工作得很好，但是一旦我试图从中间点开始拖动它就不起作用。

      _appendHandles() {
        const { brushHeight } = this._chart;
        const range = this._chart.x.range();

        this._chart.handles = this._chart.brushElement.selectAll('.handle--custom')
          .data([{type: 'w'}, {type: 'e'}])
          .enter()
          .append('g')
          .attr("class", d => `handle--custom handle--custom--${d.type}` )
          .attr("transform", (d, i) => `translate(${range[i]}, 0)`)

        this._chart.handles.append('rect')
          .attr("width", 7)
          .attr("height", brushHeight)

        this._chart.handles.append('g')
          .attr('class', 'dots-group')
          .selectAll('dots')
          .data([0, 1, 2])
          .enter()
          .append('circle')
          .attr('class', 'dot')
          .attr('cx', 3.5)
          .attr('cy', (d, i) => 2 + brushHeight/3 + i * (brushHeight/6))
          .attr('r', 3)
      } 

我试过：
1.将点移动到“点组”之外，但没有帮助。
2.更改要显示的元素（不是圆形而是矩形）

问题在于点的空选择“.selectAll（'dots'）”。一旦我删除它，并附加只有一个点，它的作品很好，我可以拖动使用点以及

我不想分别画每个点。

---

知道为什么会这样吗

为什么需要将值0,1,2绑定到点，只需在数字列表上执行常规JS foreach，并在

点组中添加一个点

g

。也可以删除

dots组上的
指针事件
。Thx，它起作用了。但还是。。。为什么会发生这种情况？您不希望点响应鼠标事件，而是希望它们由下一个较低的元素处理。