Блог

Есть несколько дискуссий о программном запуске перетаскивания d3. Обычно люди предлагают обходной путь. Например, сохраните функцию перетаскивания и запустите ее напрямую. Итак, есть ли способ вызвать перетаскивание 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}));
  

Хорошо, я понял это

Похоже, что view: 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
    }));