d3: невозможно отправить события мыши другому элементу svg (event.target .__ data__ имеет значение null)

Question

Я пытаюсь добавить bru sh к написанному мною линейному графику d3, который уже поддерживает наведение через rect, к которому я прикрепил mousemove. Однако, чтобы не нарушить функциональность наведения, мне нужно инициализировать d3 bru sh за этим rect, чтобы он не фиксировал все события мыши.

Для bru sh для работать, поэтому мне нужно отправлять события мыши из объекта hover rect в элемент svg за ним, на котором я инициализировал bru sh, точно так же, как в этом примере , который фиксирует события из элементов перед bru sh:

.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); выдает исключение:

введите описание изображения здесь

Похоже, что brush.js d3 ищет event.target.__data__.type, которого не существует, потому что это не «настоящее» событие.

Как я могу этого избежать? Разве больше нельзя "подделывать" события мыши d3?

Answer 1

Я нашел этот новый пример, который, кажется, действительно работает: https://bl.ocks.org/mthh/99dc420cd7e276ecafe4ef4bf12c6927

Он заменяет упомянутый мной код проблемы c следующим:

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