D3.js - Daten in verschachtelten Array Zugriff auf

Question

ich ein Datenfeld habe, die wie folgt aussieht:

var data = [ 
    { 
    "key": "user", 
    "values": [ 
     "roles", 
     "manager", 
     "otherRoles", 
     "reports", 
     "devices", 
     "coffees" 
    ] 
    }, 
    { 
    "key": "role", 
    "values": [ 
     "assignments", 
     "members", 
     "otherMembers" 
    ] 
    }, 
    { 
    "key": "assignment", 
    "values": [ 
     "roles" 
    ] 
    }, 
    { 
    "key": "Device", 
    "values": [ 
     "owners", 
     "roles" 
    ] 
    }, 
    { 
    "key": "Coffee", 
    "values": [ 
     "drinkers" 
    ] 
    } 
]; 

I Tabellen von SVG Rechtecken zu machen versucht bin, wo der Tabellenkopf der „Schlüssel“ und die Tabelle ist Zeilen sind die "Werte". Die einzige Möglichkeit, diese Arbeit zu machen, bestand darin, jeder Tabelle eine eindeutige inkrementelle Klasse zu geben (Tabelle0, Tabelle1 usw.). Ich weiß, dass dies schrecklich ist und verhindert, dass ich in Zukunft einfach auf alle Tabellen zugreifen kann. Hier ist der relevante Code:

   parentBox = svgContainer.selectAll('.table') 
        .data(data, function(d) {return d.key;}) 
        .enter() 
        .append('g') 
        .attr('class', function(d, i) { 
         return "table" + i; 
        }) 
        .attr("transform", function(d, i) { 
         return "translate(" + boxWidth*i + "," + rowHeight*i + ")"; 
        }); 

Ich mag würde, den richtigen Weg, um herauszufinden, um verschachtelte Daten in D3 zuzugreifen. Hier ist der Code in seiner Gesamtheit: D3 Example

Answer 1

Es stellt sich heraus, dass die Lösung nur Verständnis der Auswahl besser erfordert. Ich habe zuerst den Behälter parentBox:

parentBox = svgContainer.selectAll('.table') 
    .data(data, function(d) {return d.key;}) 
    .enter() 
    .append('g') 
    .attr('class', 'table') (etc.) 

Dann, wenn die Tabelle mit Zeilen Bevöl ersten ausgewählten I die erstellten Tabellen, verwendet, um durch jede Tabelle die einzelnen Methoden zur Schleife und jede Zeile erstellen. Der eine Trick bestand darin, d3.select(this) zu verwenden, um sicherzustellen, dass die Zeilen ordnungsgemäß erstellt wurden.

   svgContainer.selectAll('.table') 
       .each(function (d, i) { 
        tableRows = d3.select(this).selectAll('.row') 
         .data(d.values) 
         .enter() 
         .append(g) (etc.)