Can't create new brush selection inside extent, only change exsisting one

[vbojilova]

I am using semiotic to draw a chart. From there I have an svg layer that sits on top of my chart, which I need for brushing. If I move the brush with "brush.move(gBrush, [[x1, y1], [x2, y2]]);" I can extend and move the already existing one but cannot seem to create a new one in the extent.

Layout of my elements:

    <div
      ref={ref}
    >
        <XYFrame {...frameProps} />
        <svg
          id="brushSvg"
          width="700px"
          height="700px"
          style={{ pointerEvents: "none" }}
        />
    </div>

How I append the brush:

      const brushSvg = d3.select("#brushSvg");
      const brush = d3
        .brush()
        .extent([[0, 0], [700, 700]])
        .on("end", brushEnd);

      function brushEnd() {
        const selection = d3.event.selection;
        if (!d3.event.sourceEvent || !selection) return;
      }

         const gBrush = brushSvg
        .append("g")
        .attr("class", "brush");
        
        gBrush.call(brush)

      //brush.move(gBrush, [[60, 60], [100, 100]]);

If someone could help me, it would be greatly. appreciated!

[mbostock]

With the default behavior, you need to command-click if you want to draw a new extent within the existing extent, rather than dragging the existing extent.