Gruppierte multiple gestapelte Balkendiagramm

Question

Ich versuche ein 'gruppiertes gestapeltes Diagramm' zu erstellen (nicht sicher, ob das der richtige Name ist) folgend example, von bl.ocks.org. Jedoch meine Daten aus einer JSON-Datei kommen, das ist ganz anders, als das Beispiel liefert, mit dem Muster: (bitte jsfiddle überprüfen, wie seine ziemlich lang)

"month": "november", 
    "year": { 
    "2015": { 
     "item1": 2500, 
     "item2": 3500, 
     "item3": 4500 
    }, 
    "2016": { 
     "item1": 2300, 
     "item2": 3200, 
     "item3": 4100 
    } 
    } 

Die Idee wäre in der Lage sein, Seite zu platzieren, indem Seite, 2 Spalten, die die Jahre des gleichen Monats darstellen. Dann innerhalb dieser Spalten, um diese Artikelanzahl-Statistiken darstellen zu können.

Ich bin derzeit stecken, da ich nicht sicher bin, wie diese Daten auf die richtige Weise zugeordnet werden, um dieses Ergebnis zu erzielen. Ich interessiere mich nicht für die Farben oder Legenden/Ticks und so weiter; Nur wie man diese Daten korrekt abbildet. Hier ist eine graphische Darstellung des Endergebnisses:

Irgendwelche Ideen oder Zeiger sind herzlich willkommen.

Answer 1

Nach weiterer Untersuchung, die praktikable Lösung fand ich es zu sein, dass diese JSON-Objekt wie das Datenformat in der stacked grouped chart example aussehen aussehen. Dies ist möglicherweise nicht der ideale Weg, um dorthin zu gelangen, aber es sollte den Job erledigen.

Was ich tat, war eine Reihe von for .. in Schleifen zu verwenden, um das Objekt wie in dem anfänglichen Beispiel zu bauen:

...cut-out version bellow... 

itemLookup= data[0], 
years = d3.keys(itemLookup.year), 
items = d3.keys(itemLookup.year[years[0]]), 
columnHeaders = [], 
innerColumns = (function(){ 
    var result = {}; 
    for(var i = 0, ii = years.length; i<ii; i++){ 
    var holder = []; 
    for(var j = 0, jj = items.length; j<jj; j++){ 
     columnHeaders.push(items[j]+'-'+years[i]); 
     holder.push(items[j]+'-'+years[i]); 
     result[years[i]] = holder; 
    } 
    } 
    return result; 
})()... 

Von hier aus kann mich das anfängliche Beispiel bekommen Punkt beginnen, wo ein Objekt und ein Array, das als hart-codiert übergeben wird und als Vergleichsleitfaden verwendet wird, der die Daten aufbaut; irgendwo auf der ganzen Linie in einem foreach loop:

data.forEach(function(d, i){ 
    var tempData = {}, 
    curYear; 
    tempData.monthName = d.month; 

    //functionality to be implemented 
    if(d.month === stripedPattern.monthName){ 
    chart 
     .select('svg') 
     .append('defs'); 
    } 
    for(var key in d.year){ 
    if(curYear != key){ 
     curYear = key; 
     tempData['totalValue-'+curYear] = 0; 
    } 
    var holder = d.year[key]; 
    for(var item in holder){ 
     tempData[item+'-'+key] = holder[item]; 
     tempData['totalValue-'+curYear] += parseInt(holder[item]); 
    } 
    } 

    //this obj holds the correct data, similar to what the example provided 
    dataRebuild.splice(i, 0, tempData); 
}); 

Und von hier an, bleibt die Idee dahinter die gleichen wie im ursprünglichen Beispiel, wie ich meine Daten konvertieren wie aus dem Beispiel diese Daten zu betrachten, und der Lage sein, füge es ein.

Auch wenn es (wahrscheinlich gibt es) einige andere elegante Lösungen zu diesem Endpunkt zu erreichen, teilen Sie sie bitte hier herum.

Schauen Sie sich die 'Arbeits' demo here (work in progress)