dom - change - title css

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

Question

Intento aprender D3 experimentando con uno de sus gráficos de burbujas básicos . Primera tarea: descubra cómo arrastrar una burbuja y hacer que se convierta en el objeto superior mientras se arrastra. (El problema es hacer que el modelo de objetos de D3 se asigne al 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 genial. Drags bien Ahora, ¿cómo logramos que sea el elemento superior? Busque "svg z-index" aquí y se vuelve rápidamente evidente que la única forma de cambiar el índice es mover un objeto más abajo en el DOM. DE ACUERDO. No lo hacen fácil porque las burbujas individuales no tienen ID, pero al jugar con la consola, podemos ubicar uno de esos objetos de burbuja con:

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

y podemos moverlo hasta el final del elemento que contiene svg con:

.appendTo(''svg'')

Arrástrelo después de hacer eso, y es el elemento superior. Hasta ahora, muy bien, si estás trabajando completamente dentro del DOM.

PERO: lo que realmente quiero hacer es que eso suceda automáticamente cada vez que se arrastra un objeto / burbuja determinado. D3 proporciona un modelo para las dragstart() y dragend() que nos permitirá incrustar una declaración para hacer lo que queramos durante el proceso de arrastre. Y D3 proporciona la d3.select(this) que nos permite acceder a la representación de objeto de d3 del objeto / burbuja que estás arrastrando actualmente. Pero, ¿cómo puedo convertir limpiamente esa matriz masiva que devuelven 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? ?

Answer 1

Cualquier elemento DOM en un documento SVG tendrá una propiedad ownerSVGElement que haga referencia al documento SVG en el que se encuentra.

Las selecciones de D3 son solo matrices anidadas con métodos adicionales; si tiene .select() ed un solo elemento DOM, puede obtenerlo con [0][0] , por ejemplo:

var foo = d3.select(someDOM);
// later, where you don''t have someDOM but you do have foo
var someDom = foo[0][0];
var svgRoot = someDom.ownerSVGElement;

Sin embargo, tenga en cuenta que si usa d3.select(this) , this ya es el elemento DOM; no es necesario envolverlo en una selección D3 solo para desenvolverlo.

Answer 2

Puede asignar identificadores y clases a los elementos individuales si lo desea cuando agrega:

node.append("circle.bubble")
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return fill(d.packageName); })
.attr("id", function(d, i) { return ("idlabel_" + i)})
.attr("class", "bubble")
;

Y luego puede seleccionar por clase con selectAll ("circle.bubble") o seleccionar por id y modificar los atributos de esta manera:

var testCircle = svg.select("#idlabel_3")
.style("stroke-width", 8);

Answer 3

También puede obtener el elemento DOM representado por una selección a través del método selection.node ()

var selection = d3.select(domElement);
// later via the selection you can retrieve the element with .node()
var elt = selection.node();