使用d3时，如何只用鼠标事件触发拖动？

Question

有一些关于以可编程方式触发 d3 拖动的讨论。 通常人们会给出变通办法。 喜欢存储拖动function直接触发。 那么有没有一种方法可以使用鼠标事件触发 d3 拖动？ d3 拖动必须根据鼠标事件来实现。 在我的应用程序中，有复杂的拖动设置并且公开拖动处理程序是不可行的。 另外，我希望代码只在边界上进行测试，而不是必须打开它。

我想知道 d3 是如何实现拖动的。 我已尝试调度 mousedown 和 mousemove 事件，但它不起作用。 这是我的测试代码。

    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(
        new MouseEvent('mousedown', {clientX, clientY, buttons: 1}));
    circles[0].dispatchEvent(
        new MouseEvent('mousemove', {clientX, clientY, buttons: 1}));
    circles[0].dispatchEvent(new MouseEvent(
        'mousemove',
        {clientX: clientX + 100, clientY: clientY + 100, buttons: 1}));

Answer 1

好吧，我明白了

看起来像视图：window 是交易破坏者。 我不太明白它的重要性，但它确实有效。 如果你知道为什么，请发表评论让我和其他人知道。

    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(new MouseEvent('mousedown', {
      clientX,
      clientY,
      view: window, // After adding this, it works.
    }));
    circles[0].dispatchEvent(new MouseEvent('mousemove', {
      clientX,
      clientY,
    }));
    circles[0].dispatchEvent(new MouseEvent('mousemove', {
      clientX: clientX + 100,
      clientY: clientY + 100,
    }));
    circles[0].dispatchEvent(new MouseEvent('mouseup', {
      clientX: clientX + 100,
      clientY: clientY + 100,
      view: window, // Here too
    }));