¿Cómo acceder al elemento DOM que se correlaciona con un objeto SVG D3?

Estoy tratando de aprender D3 experimentando con uno de sus bubblecharts básicos . Primera tarea: averigua cómo arrastrar una burbuja y haz que se convierta en el objeto más alto mientras se arrastra. (El problema es conseguir que el modelo de objetos de D3 se mapee en el DOM, pero llegaré allí...)

Para arrastrarlo, simplemente podemos invocar el comportamiento de arrastre de d3 utilizando el código que proporcionan:

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

Funciona muy bien. Arrastra bien. Ahora, ¿cómo hacemos que sea el elemento más importante? Buscar por " svg z-index" aquí y se hace rápidamente evidente que la única manera de cambiar el índice es mover un objeto más abajo en el DOM. OK. No lo hacen fácil porque las burbujas individuales no tienen ID, pero jugando con la consola, podemos localizar uno de esos objetos de burbuja con:

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

Y podemos moverlo al final del elemento svg que lo contiene con:

.appendTo('svg')

Arrástrelo después de hacer eso, y es el elemento más importante. Hasta ahora, todo bien, si estás trabajando por completo dentro del DOM.

PERO: lo que realmente quiero hacer es que eso suceda automáticamente cada vez que se arrastra un objeto/burbuja dado. D3 proporciona un modelo para las funciones dragstart() y dragend() que nos permitirá incrustar una instrucción para hacer lo que queramos durante el proceso de arrastre. Y D3 proporciona la sintaxis d3.select(this) que nos permite acceder a la representación de objeto de d3 del objeto/burbuja que está arrastrando actualmente. Pero ¿cómo puedo convertir limpiamente esa matriz masiva que regresan en una referencia a un elemento DOM con el que puedo interactuar y, por ejemplo, moverlo al final del contenedor svg, o realizar otras referencias en el DOM, como el envío de formularios?