Estoy tratando de aprender D3 experimentando con uno de sus básica bubblecharts. Primera tarea: averiguar cómo arrastrar una burbuja y lo han convertido en el objeto superior mientras está siendo arrastrado. (El problema es conseguir D3 del modelo de objetos de mapa en la DOM, pero voy a llegar…)

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

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

De las grandes obras. Arrastra bien. Ahora, ¿cómo podemos llegar a ser el elemento superior? De la búsqueda para «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. Que no es fácil porque el individuo que las burbujas no tienen ID, pero jugando con la consola, podemos localizar a uno de esos burbuja objetos con:

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

y podemos pasar a la final de la que contiene svg elemento con:

.appendTo('svg')

Arrastre después de hacer eso, y es el ítem más arriba. Tan lejos, tan bueno, si usted está trabajando en su totalidad dentro del DOM.

PERO: lo que realmente quiero hacer es tener que suceder de forma automática, siempre que un objeto/burbuja está siendo arrastrado. D3 proporciona un modelo para dragstart() y dragend() funciones que nos va a permitir insertar una instrucción para hacer lo que quieras durante el proceso de arrastrar. Y D3 proporciona la d3.select(this) sintaxis que nos permite acceder a d3 objeto de la representación del objeto/burbuja que actualmente está arrastrando. Pero, ¿cómo puedo limpiamente su vez que la enorme variedad que el retorno a una referencia a un elemento DOM que puedo interactuar con y – por ejemplo – de pasar a la final de la svg contenedor, o realizar otras referencias en el DOM, tales como el envío de formularios?

InformationsquelleAutor XML | 2012-04-26

3 Comentarios

  1. 173

    También se puede obtener en el elemento DOM representado por una selección a través de selección.nodo() método

    var selection = d3.select(domElement);
    
    //later via the selection you can retrieve the element with .node()
    var elt = selection.node();
    • Esta es una mejor manera de respuesta.
    • Btw. esta es también la forma recomendada de d3.js’ autor Mike Bostok en su artículo ¿Cómo Selecciones Trabajo
    • Esta es una excelente…
    • Esta es la respuesta correcta.
  2. 31

    Cualquier elemento DOM en un documento SVG tendrá un ownerSVGElement propiedad que hace referencia el documento SVG es en.

    D3 selecciones son sólo las matrices anidadas con métodos adicionales en ellos; si usted tiene .select()ed un único elemento de DOM, usted puede conseguir 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;

    Nota, sin embargo, que si usted está utilizando d3.select(this) luego this ya es el elemento DOM; no es necesario envolverlo en un D3 selección sólo a desenvolverlo.

    • Oh, Wow. Que es el billete. Me quedé tratando de usar d3.select(this), en lugar de sólo this. De ahí que me puede simplificar drásticamente document.getElementsByTagName("svg")[0].appendChild(document.getElementById(d3.select(this).attr('id'))); en $("svg").append($(this));. Gracias!
    • O simplemente this.ownerSVGElement.appendChild(this);
    • Perfecto! Gracias: yo ya estaba tratando de deshacerse de la Jquery participación, pero fue colgado en D3 de la sintaxis. Hay una racionalización de la API para que en cualquier lugar? Estoy trabajando mi camino a través de la documentación, pero parece muy dispersa, como todavía…
    • No estoy de profundidad en el D3 de la comunidad y los recursos, así que no estoy seguro. Sé que a) Hay un MONTÓN de ejemplos dispersos y semi-agregada en muchas áreas. b) La oficial de la documentación de la API es exhaustiva, pero algunas cosas acerca de la presentación me tiran fuera, y por lo tanto, c) estoy en el proceso de creación de mi propio punto de vista sobre la documentación (actualmente incompleto).
    • Esto no parece funcionar, al menos no más que en d3 4.0. Aunque hay un elemento en mi selección, mySel[0] es undefined para mí. mySel._groups[0][0] devuelve el elemento de DOM, pero esto no parece que se debería acceder. El mySel.node() solución de la otra respuesta parece un limpiador de enfoque.
  3. 11

    Puede asignar Identificadores y clases a los elementos individuales si usted desea cuando usted anexar:

    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, a continuación, puede seleccionar la clase con selectAll(«circle.la burbuja») o seleccione por id y modificar los atributos de este modo:

    var testCircle = svg.select("#idlabel_3")
    .style("stroke-width", 8);
    • … Al principio pensé que esto no era una respuesta, pero se convierte en uno con la siguiente adición: si usted va por delante y asignar ID a cada nodo en el momento de la creación, entonces usted puede: d3.seleccione(este).attr(‘id’), y ahora tiene un trabajo de referencia para el objeto DOM. Gracias!
    • TAMBIÉN tenga en cuenta que lo que realmente se quiere acceder es el ID del nodo en sí, no el nodo del círculo. Así, inserte la línea de .attr("id", function(d, i) { return ("idlabel_" + i)}) en la función de inicio con d3.json("data/flare.json", function(json) {, no en node.append("circle.bubble")
    • Ese es un buen punto, aunque a veces se desea acceder al círculo sí, si lo que estás haciendo es aplicar cambios en el estilo de ese elemento (que es lo que está pasando en el código en el ejemplo que se viene.

Dejar respuesta

Please enter your comment!
Please enter your name here