When Using D3, How To Trigger Drag With Only Mouse Events?

There are some discussions around triggering d3 drag programmably. Usually people give a work around way. Like store the drag function and trigger it directly. So is there a way to

Solution 1:

Ok, I figured it out

Looks like the view: window is the deal breaker. I don't quite understand the importance but it works. If you know why, please make comments to let me and others know.

const circles = document.querySelectorAll('.edit-handler');
    const clientRect = circles[0].getBoundingClientRect();
    const clientX = (clientRect.left + clientRect.right) / 2;
    const clientY = (clientRect.top + clientRect.bottom) / 2;
    circles[0].dispatchEvent(newMouseEvent('mousedown', {
      clientX,
      clientY,
      view: window, // After adding this, it works.
    }));
    circles[0].dispatchEvent(newMouseEvent('mousemove', {
      clientX,
      clientY,
    }));
    circles[0].dispatchEvent(newMouseEvent('mousemove', {
      clientX: clientX + 100,
      clientY: clientY + 100,
    }));
    circles[0].dispatchEvent(newMouseEvent('mouseup', {
      clientX: clientX + 100,
      clientY: clientY + 100,
      view: window, // Here too
    }));