Jak przetwarzać dane zagnieżdżone na wielu poziomach w D3?

Question

I mają następujące struktury danych

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

widzę przykłady przetwarzania dwa poziomy zagnieżdżenia i za nimi może przetwarzać dane. Po prostu potrzebuję narysować prostokąty dla każdego elementu z właściwością klucza i określić jego kolor i położenie w oparciu o inne właściwości tego obiektu. Oto przykładowy kod zbliżony do tego, co chcę zrobić:

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}); 

Spodziewam się narysować trzy rzędy prostokątów. W tym kodzie pierwsze dwa wiersze wyświetlają się poprawnie, ale trzeci wiersz nie pojawia się wcale. Zajrzałem do konsoli javascript i wyglądało na to, że prostokąty trzeciego rzędu są dołączane do tytułu prostokąta z drugiego rzędu. Mam nadzieję, że to pomoże pokazać, o co tutaj pytam. Czy to jest sposób, w jaki powinienem się tu zapętlać, czy jest lepszy sposób na zrobienie tego?

Answer 1

Być może mógłbyś użyć rozwiązania rekurencyjnego podobnego do tego @nautat opublikowanego, aby odpowiedzieć na moje pytanie dotyczące zagnieżdżonych tabel HTML z d3? https://stackoverflow.com/a/13412059/658053 Byłem w stanie zmodyfikować go tak, aby pasował do moich aktualnych danych i specyfikacji, gdy już miałem sens wykonywania rekursji.

Podstęp polega na tym, że w pewnych warunkach można wykonać .filter, a także funkcję rekursywną w komórkach pasujących do filtra lub w przypadku bazowym na elementach pasujących do innego rodzaju filtru.

Powodzenia!