画笔的d3事件传播

Question

我正在使用带有自定义手柄的d3笔刷，以便为自己的选择锦上添花。数据的选择工作正常，但是手柄的笔刷移动事件传播有些问题。这是图表：

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

问题如下：当我使用bar（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'）”。一旦删除并仅添加一个点，它就可以正常工作，也可以使用点拖动。

我不想分别绘制每个点。 任何想法为什么会这样？