分組多條堆積條形圖

我試圖從bl.ocks.org下面的這個example之後創建一個「分組堆積圖」（不知道這是否是正確的名稱）。但是我的數據來自一個JSON文件，這是從什麼例子提供了完全不同的，與圖案：（請jsfiddle，其相當長）分組多條堆積條形圖

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

的想法是能夠通過放置一邊一邊，2列，代表同一個月的年份。然後在這些列內部能夠表示這些項目編號統計。

我目前陷入困境，因爲我不知道如何以正確的方式映射這些數據，以實現該結果。我對顏色或傳說/刻度等不感興趣;只有如何正確映射這些數據。下面是最終結果的圖形表示：

任何意見或指針最歡迎。

來源

2016-04-21 RGLSV

在'd.total = d3.max（d.columnDetails，函數（d）{ 回報d.yEnd; }）;'你正在變得'd.yEnd'未定義。 – ozil

@ozil是的，這個map函數有些錯誤;我沒有得到正確的數據，或者更好地不知道這個例子是否適用於我的數據格式 – RGLSV

我不會提供不運行的代碼.... – thatOneGuy

經過進一步調查，我發現可行的解決方案是讓json對象看起來像stacked grouped chart example中提供的數據格式。這可能不是達到目標的理想方式，但它應該完成工作。

我所做的是在最初的例子使用了一堆for .. in循環來構建對象，如：

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

從這裏我能得到初始的例子開始的點，其中一個對象，作爲硬編碼傳入的數組，並用作構建數據的比較指南;倒在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); 
});

而且從這裏開始，這個想法停留在相同最初的例子，因爲我得到了我的數據格式看起來像從示例數據，並能夠執行它。

再次如果有（最有可能的話）一些其他更優雅的解決方案到達該端點，請在這裏分享它們。

時退房 '工作' demo here（進展）

來源

2016-04-25 14:26:16 RGLSV

分組多條堆積條形圖

回答

相關問題