使用 d3 时，如何仅通过鼠标事件触发拖动?

2022-01-19 00:00:00 d3.js frontend javascript typescript

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

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 trigger d3 drag using mouse events? The d3 drag must be implemented according to mouse events. In my app, there are complicated drag setups and expose the drag handlers is not feasible. Also, I hope the code is tested only on boundaries instead of having to open it up.

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

I'm wondering how d3 implemented the drag. I have tried to dispatch mousedown and mousemove events, but it doesn't work. Here is my testing code.

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

推荐答案

好的，我想通了

看起来像视图:窗口是交易破坏者.我不太明白它的重要性，但它确实有效.如果您知道原因，请发表评论让我和其他人知道.

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(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
    }));

相关文章