Proper Datenstruktur für D3 gestapeltes Balkendiagramm

Question

Ich versuche, diese Daten in einem gestapeltes Balkendiagramm mit D3 v4 zu visualisieren:

var data = [ 
    {'id': '10', 'status': 'on', 'variant': 'A', 'value': '200'}, 
    {'id': '10', 'status': 'on', 'variant': 'B', 'value': '500'}, 
    {'id': '11', 'status': 'off', 'variant': 'A', 'value': '100'}, 
    {'id': '12', 'status': 'on', 'variant': 'A', 'value': '600'}, 
    ... 
] 

Alle Elemente mit dem gleichen Schlüssel id sollte auf der x-Achse stapeln, wo value definiert die Höhe und status definiert die Farbe.
Ein Datensatz kann mehrere Elemente mit demselben id aber anderen status oder variant enthalten, wie im Beispiel id = 10.
Welches Format wäre geeignet, um diese Daten zu stapeln? Meine Annäherung schachtelte es:

var nested = d3.nest() 
    .key(function(d) { return d.id; }) 
    .entries(data); 

Von hier bin ich nicht sicher, wie man die y0 und y1 Werte erzeugt. Kann ich d3.stack verwenden?

Answer 1

Sie könnten Schleife durch die values Array in jedem Objekt der obersten Ebene und haben immer eine laufende Summe von value, die für jede y0<rect> wird. y1 ist dann y0 + value.

binden, dann wird jedes Objekt der obersten Ebene an einen <g> tag den gesamten Stapel darstellt, übersetzen, die an die entsprechenden x Position (unter der Annahme Balken sind vertikal), und Anfügen <rect> s an jede <g> mit der values prop als Daten. Stellen Sie die height und y Position der Rect nach wo im Stapel es gehört. Das könnte aussehen:

var groups = d3.selectAll("g") 
    .data(nested) 
    .enter().append("g"); 
groups.attr("transform","translate..."); 
var rects = groups.selectAll("rect") 
    .data(function(d) { return d.values }) 
    .enter().append("rect"); 
rects 
    .attr("width",...) 
    .attr("height",...) 
    .attr("y",...)