分组多条堆积条形图

我试图从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

分组多条堆积条形图

回答

相关问题