D3 Gráfico de burbujas

Question

Soy nuevo en D3 y estoy teniendo un momento muy difícil con el gráfico de burbujas a menos que utilice el ejemplo de datos exacta:

• https://github.com/mbostock/d3/blob/master/examples/bubble/bubble.js
• https://github.com/mbostock/d3/blob/master/examples/data/flare.json

Específicamente estoy teniendo problemas con

.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

No puedo ejecutar obtener esta parte de la código para trabajar con otros ejemplos.

Aquí es un subconjunto de los datos JSON estoy trabajando con:

{ 
"name": 301, 
"children": [ 
    { 
     "resourceid": "11", 
     "creator_uid": "301", 
     "owner": "Tom", 
     "name": "Omega", 
     "created_time": "2012-03-07 20:07:11", 
     "items": "4" 
    }, 
    { 
     "resourceid": "188", 
     "creator_uid": "301", 
     "owner": "Tom", 
     "name": "Nexus", 
     "created_time": "2012-03-31 00:04:56", 
     "items": "14" 
    } 
    ] 
} 

soy capaz de establecer el radio a "elementos", pero espero

.data(bubble.nodes(json) 

para distribuir los nodos , pero recibo errores que dx es NULL. Teniendo en cuenta los datos de muestra para el ejemplo de burbujas, no estoy seguro de cómo el ejemplo de burbujas está creando d.x y d.y.

¿Podría alguien explicar esto en detalle?

Answer 1

Al utilizar el diagrama de burbujas, los datos deben aplanarse. En el ejemplo que ha vinculado, hay una llamada a una función llamada "clases" que para cada nodo devuelve la clase como un nuevo objeto con la propiedad value que contiene el tamaño. (Su código anterior sugiere que omitió esta llamada).

Más tarde, la llamada a la función bubble.nodes utiliza la propiedad value de cada objeto creado por la función de las clases (que se introduce en una sola matriz) para calcular la x e y (que a su vez se utiliza dentro de la función de transformación) . Consulte the d3 docs para obtener más información sobre la función del paquete. Esta misma función nodes también calcula el radio (como r) que se utiliza más adelante.

Es esa llamada al nodes que determina el diseño completo del gráfico de burbujas. El resto del código en la muestra tiene que ver con la construcción de los elementos SVG necesarios, como un círculo y texto en las posiciones especificadas por los resultados calculados por la función nodes.

Así que no puede pasar directamente los datos json a la función bubble.nodes a menos que cumpla con requisitos específicos (como tener una propiedad value).

Here es un ejemplo de trabajo en jsfiddle.net.