d3 - посмотреть, что находится в конкретной позиции x, y

Question

Я пытаюсь реализовать некоторые функции перетаскивания в дереве d3, где, когда узел перетаскивается, если он равен 50 пикселям непосредственно слева от узла, который мне нужен чтобы нарисовать пунктирный коннектор, чтобы указать, что если вы отпустите узел, его следует переместить как ребенка.

Для этого моя идея в том, что я проверяю, какой элемент имеет 50 пикселей влево. Есть ли способ увидеть, что находится в конкретной позиции x, y в d3? Я попытался проверить это во время перетаскивания.

document.elementFromPoint(d3.event.x, d3.event.y); 

Однако это возвращает только элемент svg. Есть ли аналогичный способ в d3 или любые другие идеи?

-Tim

Answer 1

Я думаю, что вы в основном имеют проблемы обнаружения столкновений/пересечения для решения. И, как упоминалось в ссылках, опубликованных выше, кажется, существует некорректная поддержка браузера для надежного способа сделать это в SVG или D3.

Однако, в вашем примере дерева (способ 1 от this answer), чтобы обойти это, нужно нарисовать большие прозрачные круги вокруг тех же координат x, y, что и узлы. Затем вы можете обнаружить события наведения мыши на них и нарисовать свой временный соединитель, чтобы показать пользователя.

У меня есть рабочий пример этого здесь: http://bl.ocks.org/explunit/5603250

Основной раздел рисования больше прозрачный узел, а затем обнаружения наведении курсора мыши события на нем:

node.append("circle") 
    .attr("r", 60) 
    .attr("opacity", 0.0) // change this to non-zero to see the target area 
    .on("mouseover", overCircle) 
    .on("mouseout", outCircle) 

Остальная часть кода просто логику вокруг перетаскивания и отслеживания источника/цели, когда все перемещается.

Я не уверен, что это намного лучше, чем Техника 2 от this answer, но ваш вопрос заставил меня любопытно попробовать этот подход.