javascript - d3：无法将鼠标事件发送到另一个 svg 元素（event.target.__data__ 为空）

Question

我正在尝试将画笔添加到我编写的 d3 折线图中，该折线图已经支持悬停在rect我附加的 a 上mousemove。但是，为了避免破坏悬停功能，我需要在 this 后面初始化 d3 画笔rect，这样它就不会捕获所有鼠标事件。

为了使画笔工作，我需要将鼠标事件从悬停发送rect到它后面的 svg 元素，我已经在该元素上初始化了画笔，就像在这个示例中一样，它从画笔前面的元素中捕获事件：

.on('mousedown', function(){
  brush_elm = svg.select(".brush").node();
  new_click_event = new Event('mousedown');
  new_click_event.pageX = d3.event.pageX;
  new_click_event.clientX = d3.event.clientX;
  new_click_event.pageY = d3.event.pageY;
  new_click_event.clientY = d3.event.clientY;
  brush_elm.dispatchEvent(new_click_event);
});

但是，使用 2013 年并使用 d3 v3 的示例brush_elm.dispatchEvent(new_click_event);会引发异常：

似乎 d3brush.js正在寻找event.target.__data__.type不存在的 ，因为它不是“真实”事件。

我怎样才能避免这种情况？是否不再可能“伪造”d3 鼠标事件？

Answer 1

我发现了这个较新的示例，它实际上似乎有效：https ://bl.ocks.org/mthh/99dc420cd7e276ecafe4ef4bf12c6927

它用以下内容替换了我提到的有问题的代码：

const brush_elm = vis.select('.brush > .overlay').node();
const new_click_event = new MouseEvent('mousedown', {
    pageX: d3.event.pageX,
    pageY: d3.event.pageY,
    clientX: d3.event.clientX,
    clientY: d3.event.clientY,
    layerX: d3.event.layerX,
    layerY: d3.event.layerY,
    bubbles: true,
    cancelable: true,
    view: window });
brush_elm.dispatchEvent(new_click_event);