Utilizzando D3 con un array multi-dimensionale/oggetto

Question

Ho un file JSON con un formato simile al seguente:

{ 
    "John":{ 
     "name":"John", 
     "counts":[ 1, 5, 10, 6 ] 
    }, 
    "Steve":{ 
     "name":"Steve", 
     "counts": [ 6, 4, 50, 40 ] 
    } 
} 

Sto cercando di fare una visualizzazione D3 che fa un istogramma semplice per quei conteggi , con un'etichetta del nome a sinistra. Quando ho una singola serie di dati e un nome posso farlo in questo modo:

svg.selectAll("rect").data([ 1, 5, 10, 6 ]).enter().append("rect") 
      .attr("x",function(d,i) { return i*columnWidth; }) 
      .attr("y",function(d) { return (rowHeight-scale(d));}) 
      .attr("width",columnWidth) 
      .attr("height",function(d) { return snowScale(d); }); 

svg.selectAll("text").data("John").enter().append("text") 
     .text(function(d) { return d; }) 
     .attr("x",nameBuffer) 
     .attr("y",function(d,i) { return rowHeight; })    
     .attr("font-size", "14px"); 

Questo funziona per una singola riga con i dati forniti direttamente, con l'etichetta di testo verso sinistra e poi una serie di colonne di uguale larghezza per ogni punto dati. Ma sto iniziando con D3 e non riesco, per la vita di me, a capire come concatenare qualcosa che scorre attraverso ogni oggetto e crea una nuova riga per ciascuno, aggiungendo allo spostamento verticale ogni volta.

Come è possibile eseguire il ciclo, creando un oggetto per ogni file nel file e quindi creando il testo + colonne per ogni riga, preservando i diversi valori nidificati e gli indici di array?

Answer 1

La chiave per ottenere ciò che si desidera è utilizzare le selezioni nidificate. L'idea è di passare l'intero oggetto dati al primo livello e creare un gruppo SVG per gli elementi. Per ciascuno di questi elementi, la visualizzazione effettiva viene quindi aggiunta in modo simile a quello che stai facendo ora.

Dai un'occhiata a Mike's tutorial on nested selections. Ricorda di sostituire le tue chiamate di dati attualmente codificate con i rispettivi elementi, ad es. .data(d.counts) anziché .enter([1, 5, 10, 6]).