Как получить доступ к элементу DOM, который соответствует объекту D3 SVG?

Я пытаюсь изучить D3, экспериментируя с одной из их базовых пузырьковых диаграмм . Первая задача :выяснить, как перетащить пузырек так, чтобы он стал самым верхним объектом во время перетаскивания. (Проблема заключается в том, чтобы заставить объектную модель D3 отображаться в DOM, но я доберусь до этого...)

Чтобы перетащить ее, мы можем просто вызвать поведение перетаскивания d3, используя код, который они предоставляют:

var drag = d3.behavior.drag()
   .on("dragstart", dragstart)
   .on("drag", dragmove)
   .on("dragend", dragend);

Отлично работает. Хорошо тянет. Теперь, как нам сделать так, чтобы он был самым верхним элементом? Найдите здесь «svg z -index», и сразу станет понятно, что единственный способ изменить индекс — переместить объект ниже в DOM. В ПОРЯДКЕ. Они не облегчают задачу, потому что отдельные пузырьки не имеют идентификаторов, но, возясь с консолью, мы можем найти один из этих пузырьковых объектов с помощью:

$("text:contains('TimeScale')").parent()

и переместить его в конец содержащего элемента svg с помощью:

.appendTo('svg')

Перетащите его после того, как сделаете это, и он станет -самым верхним элементом. Пока все хорошо, если вы работаете полностью в DOM.

НО :что я действительно хочу сделать, так это чтобы это происходило автоматически всякий раз, когда данный объект/пузырь перетаскивается. D3 предоставляет модель для функций dragstart()и dragend(), которые позволят нам встроить оператор, чтобы делать то, что мы хотим, в процессе перетаскивания. И D3 предоставляет синтаксис d3.select(this), который позволяет нам получить доступ к объектному представлению d3 объекта/пузыря, который вы в данный момент перетаскиваете. Но как мне аккуратно превратить этот массивный массив, который они возвращают, в ссылку на элемент DOM, с которым я могу взаимодействовать, и -, например -, переместить его в конец контейнера svg или выполнить другие ссылки в DOM, например, отправка формы?