d3.js: Wie füllt Attribut svg Gruppenelement zuzugreifen (gestapeltes Balkendiagramm)

Question

Neuling d3.js hier, ich versuche, um die Probe von gestapeltes Balkendiagramm mit d3.stack() (Anmerkung: nicht d3.layout.stack()) zu verstehen, aus der Beispiellink: http://bl.ocks.org/mbostock/3886208 (von Mike Bostock)

Ich versuche, das Fill-Attribut der einzelnen SVG-Gruppenelemente aufzurufen, die jeweils eine einzelne "Schicht"/Altersgruppe darstellen. Um dies zu tun, muss ich eine kleine Änderung an der „Enter“ Teil:

var seriesG = g.selectAll(".serie") 
    .data(function(){return stackedColumns;}) 
    .enter().append("g") 
     .attr("class", "serie") 
     .attr("fill", function(d) {return z(d.key); }); 

Seit console.log(seriesG); in zi {_groups: Array[1], _parents: Array[1]} führte, dachte ich, dass die sieben svg Gruppenelemente, die die sieben Altersbereich Gruppen darstellt, ist zugänglich in der _groups Mitglied Objekt.

Jetzt kann ich jedes svg Gruppenelement von dieser grundlegenden rekursiven Routine zugreifen:

seriesG._groups.forEach(function(d, i){ 
    console.log(d); 
    });

der [g, g, g, g, g, g, g] im Browser Element Inspektor Konsole zeigt (Oper). Was ich herausfinden möchte, ist die korrekte Syntax, um auf das Fill-Attribut des 'd' -Datums zuzugreifen. Und da ich durch Beobachtung der Browser-Konsole weiß, dass die 'Füllung' das Mitglied des 'outerHTML' Mitgliedsattributs des 'd'-Datums ist, muss ich zuerst wissen, wie auf dieses' outerHTML'-Attribut zugegriffen wird. Ich habe verschiedene Syntax versucht:

• console.log(d.attr("outerHTML"));
• console.log(d.attr.outerHTML);
• console.log(d.outerHTML);
• console.log(d["outerHTML"]);

Die ersten beiden Versuche resultierten in Uncaught TypeError: d.attr is not a function, während die restlichen zwei sind undefined Operationen.

Also, in der kurzen Version meiner Frage ist: "Was ist die richtige Syntax für den Zugriff auf die Füllung jedes SVG-Gruppenelement erstellt mit d3.stack()?"

Mein Ziel ist es, verschiedene Funktionen ähnlich zu dieser Probe Link hinzuzufügen: http://bl.ocks.org/KatiRG/f7d064cd9c3efbc3c360

Answer 1

Zuerst nicht verwenden _groups. Dies soll private zu dem Auswahlobjekt sein. Sie sollten die .nodes method verwenden.

Zweitens ist meine Frage, was willst du mit diesen Füllungen tun?

Der Code, den Sie schreiben möchten, ist dies:

seriesG.nodes().forEach(function(d){ 
    console.log(d3.select(d).attr('fill')); 
}); 

Aber je nach Zweck, und da Sie Ihre Schlüssel kennen (im Beispiel Sie diese verbinden, sind „65 Jahre und älter“, „45 bis 64 Jahre“, etc ..), dann wird der Füllungswert für jeden „Schlüssel“ kann einfach zurückgegeben werden wie:

z("65 Years and Over");