使用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
    }));