D3 del grafico a bolle

Question

Sono nuovo di D3 e sto avendo un momento davvero difficile con il grafico a bolle a meno che io uso l'esatto dati esempio:

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

In particolare mi Sto avendo problemi con

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

Non riesco a eseguire questa parte del codice per lavorare con altri esempi.

Ecco un sottoinsieme dei dati JSON sto lavorando 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" 
    } 
    ] 
} 

sono in grado di impostare il raggio di "voci", ma mi aspetto

.data(bubble.nodes(json) 

per distribuire i nodi , ma sto ricevendo errori che dx è NULL. Dati i dati di esempio per l'esempio di bolle, non sono sicuro di come l'esempio di bolle stia creando d.x e d.y.

Qualcuno potrebbe spiegarlo in dettaglio?

Answer 1

Quando si utilizza il grafico a bolle, i dati devono essere appiattiti. Nell'esempio che hai collegato, c'è una chiamata a una funzione chiamata "classes" che per ogni nodo restituisce la classe come un nuovo oggetto con la proprietà value contenente la dimensione. (Il tuo codice sopra suggerisce di aver omesso questa chiamata).

Successivamente, la chiamata alla funzione bubble.nodes utilizza la proprietà value di ciascun oggetto creato dalla funzione classi (che sono stati spinto in un singolo array) per calcolare x e y (che a sua volta viene utilizzato all'interno della funzione di trasformazione) . Vedi the d3 docs per maggiori informazioni sulla funzione pack. La stessa funzione nodes calcola anche il raggio (come r) che viene utilizzato in seguito.

È quella chiamata a nodes che determina il layout completo del grafico a bolle. Il resto del codice nell'esempio è tutto basato sulla costruzione degli elementi SVG necessari come un cerchio e un testo nelle posizioni specificate dai risultati calcolati dalla funzione nodes.

Quindi non è possibile passare direttamente i dati JSON alla funzione bubble.nodes a meno che non soddisfi requisiti specifici (ad esempio con una proprietà value).

Here è un esempio funzionante su jsfiddle.net.