分组多个堆积条形图

Question

我试图创建一个分组堆积图表＆＃39; （不确定这是否是正确的名称）跟随此example，来自bl.ocks.org。但是我的数据来自一个json文件，它与示例提供的文件完全不同，具有以下模式:(请检查jsfiddle，因为它很长）

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

这个想法是能够并排放置2列，代表同月的年份。然后在这些列中，以便能够表示这些项目编号统计信息。

我目前陷入困境，因为我不确定如何以正确的方式映射数据，以实现这一结果。我对颜色，图例/刻度等不感兴趣;只有如何正确映射数据。这是最终结果的图形表示：

欢迎任何想法或指针。

Answer 1

经过进一步调查，我找到了可行的解决方案，让json对象看起来像是＆＃39;就像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);
});

从现在开始，这个想法与原始示例保持一致，因为我将数据格式看作示例中的数据，并且能够实现它。

如果有（可能还有）一些其他更优雅的解决方案可以到达该端点，请在此处分享。

查看＆＃39;工作＆＃39; demo here（正在进行中）