Come posso elaborare i dati che sono nidificati su più livelli in D3?

Question

Ho seguente struttura dati

{ key: 'a', 
    values: { key: 'a0', 
      values: { key: 'a00', 
         values: {...} 
        }, 
        { key: 'a01', 
         values: {...} 
        } 
      }, 
      { key: 'a1', 
      values: {...} 
      } 
}, 
{ key: 'b', 
    values: {...} 
} 

mi vedi esempi per l'elaborazione a due livelli di annidamento e potrebbe seguirli per elaborare i dati. Ho solo bisogno di disegnare rettangoli per ogni elemento con proprietà chiave e determinarne il colore e la posizione sulla base di alcune altre proprietà di quell'oggetto. Ecco il codice di esempio vicino a quello che voglio fare

var data = [ 
    { 
     key : 'dept1', 
     values : [ 
      { 
       key : 'group-1-1', 
       values : [ 
        { 
         key : 'emp-1-1-1', 
         salary : 10000 
        }, 
        { 
         key : 'emp-1-1-2', 
         salary : 20000 
        }, 
        { 
         key : 'emp-1-1-3', 
         salary : 30000 
        }, 
        { 
         key : 'emp-1-1-4', 
         salary : 40000 
        } 
       ] 
      }, 
      { 
       key : 'group-1-2', 
       values : [ 
        { 
         key : 'emp-1-2-1', 
         salary : 10000 
        }, 
        { 
         key : 'emp-1-2-2', 
         salary : 20000 
        }, 
        { 
         key : 'emp-1-2-3', 
         salary : 30000 
        }, 
        { 
         key : 'emp-1-2-4', 
         salary : 40000 
        } 
       ] 
      } 
     ] 
    }, 
    { 
     key : 'dept2', 
     values : [ 
      { 
       key : 'group-2-1', 
       values : [ 
        { 
         key : 'emp-2-1-1', 
         salary : 10000 
        }, 
        { 
         key : 'emp-2-1-2', 
         salary : 20000 
        }, 
        { 
         key : 'emp-2-1-3', 
         salary : 30000 
        }, 
        { 
         key : 'emp-2-1-4', 
         salary : 40000 
        } 
       ] 
      }, 
      { 
       key : 'group-2-2', 
       values : [ 
        { 
         key : 'emp-2-2-1', 
         salary : 10000 
        }, 
        { 
         key : 'emp-2-2-2', 
         salary : 20000 
        }, 
        { 
         key : 'emp-2-2-3', 
         salary : 30000 
        }, 
        { 
         key : 'emp-2-2-4', 
         salary : 40000 
        } 
       ] 
      } 
     ] 
    }, 
    { 
     key : 'dept3', 
     values : [ 
      { 
       key : 'group-3-1', 
       values : [ 
        { 
         key : 'emp-3-1-1', 
         salary : 10000 
        }, 
        { 
         key : 'emp-3-1-2', 
         salary : 20000 
        }, 
        { 
         key : 'emp-3-1-3', 
         salary : 30000 
        }, 
        { 
         key : 'emp-3-1-4', 
         salary : 40000 
        } 
       ] 
      }, 
      { 
       key : 'group-3-2', 
       values : [ 
        { 
         key : 'emp-3-2-1', 
         salary : 10000 
        }, 
        { 
         key : 'emp-3-2-2', 
         salary : 20000 
        }, 
        { 
         key : 'emp-3-2-3', 
         salary : 30000 
        }, 
        { 
         key : 'emp-3-2-4', 
         salary : 40000 
        } 
       ] 
      } 

     ] 
    } 
]; 

var svg = d3.select("body").append("svg").attr("width", "100%").attr("height", "100%"); 

var width = 200, height = 20, gap = 4, space = width + 2 * gap; 

var sel = svg.selectAll("g").data(data).enter() 
    .append("g") 
    .attr("transform", function(d, i) {return 'translate(' + space * i + ', 0)'}); 

sel.append("rect").attr("x", gap).attr('y', gap).attr('width', width).attr('height', height) 
    .attr('fill', 'green') 
    .append('title').text(function(d) {return d.key}); 

var width1 = width/2 - gap; 

var sel1 = sel.selectAll('g').data(function(d) {return d.values}).enter() 
    .append('rect') 
    .attr('x', function(p, i) {return gap + i * (width1+gap)}).attr('y', 2*gap + height) 
    .attr('width', width1).attr('height', height) 
    .attr('fill', 'blue') 
    .append('title').text(function(p) {return p.key}); 

var width1 = width/4 - 3 * gap; 

var sel2 = sel1.selectAll('g').data(function(d) {return d.values}).enter() 
    .append('rect').text(function(k) {return k.key}) 
    .attr('x', function(p, i) {return gap + i * width1}).attr('y', 3*gap + 2*height) 
    .attr('width', width1).attr('height', height) 
    .attr('fill', 'cyan') 
    .append('title').text(function(p) {return p.key}); 

Mi aspetto di disegnare tre file di rettangoli. In questo codice le prime due righe vengono visualizzate correttamente ma la terza riga non viene visualizzata. Ho guardato nella console javascript e sembra che i rettangoli della terza riga vengano aggiunti al titolo dei rettangoli della seconda riga. Spero che questo aiuti a mostrare ciò che sto chiedendo qui. È questo il modo in cui dovrei essere in loop qui o c'è un modo migliore per farlo?

Answer 1

Forse potresti utilizzare una soluzione ricorsiva simile a quella di @nautat inviata per rispondere alla mia domanda sulle tabelle HTML nidificate con d3? https://stackoverflow.com/a/13412059/658053 Sono stato in grado di modificarlo per adattarlo ai miei dati e alle specifiche attuali una volta che avevo il succo di fare la ricorsione.

Il trucco è che si esegue un .filter in alcune condizioni e .call la funzione ricorsiva sulle celle che corrispondono al filtro o si occupano del caso di base sugli elementi che corrispondono a un diverso tipo di filtro.

Buona fortuna!