Stacked graphs using data with arrays

Trying to find a way how to expand array of keys into separate records, one per element of array. And then create stacked graphs.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.6.0/dc.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.js"></script>
<div id="rowchart"></div>
<div id="piechart1"></div>
<div id="piechart2"></div>
<div id="barchart"></div>

CSS

.dc-chart {
  float: left;
}

.dc-chart rect.bar {
  stroke: none;
  fill: steelblue;
}

.dc-chart rect.bar:hover {
  fill-opacity: .5;
}

.dc-chart rect.stack1 {
  stroke: none;
  fill: red;
}

.dc-chart rect.stack2 {
  stroke: none;
  fill: green;
}

.dc-chart rect.deselected {
  stroke: none;
  fill: #ccc;
}

.dc-chart .sub .bar {
  stroke: none;
  fill: #ccc;
}

.dc-chart .pie-slice {
  /*fill: white;*/
  font-size: 12px;
  cursor: pointer;
}

.dc-chart .pie-slice:hover {
  fill-opacity: .8;
}

.dc-chart .selected path {
  stroke-width: 3;
  stroke: #ccc;
  fill-opacity: 1;
}

.dc-chart .deselected path {
  stroke: none;
  fill-opacity: .5;
  fill: #ccc;
}

.dc-chart .axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dc-chart .axis text {
  font: 10px sans-serif;
}

.dc-chart .grid-line line {
  fill: none;
  stroke: #ccc;
  opacity: .5;
  shape-rendering: crispEdges;
}

.dc-chart .brush rect.background {
  z-index: -999;
}

.dc-chart .brush rect.extent {
  fill: steelblue;
  fill-opacity: .125;
}

.dc-chart .brush .resize path {
  fill: #eee;
  stroke: #666;
}

.dc-chart path.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.dc-chart circle.dot {
  fill: steelblue;
}

.dc-chart g.stack1 path.line {
  stroke: green;
}

.dc-chart g.stack1 circle.dot {
  fill: green;
}

.dc-chart g.stack2 path.line {
  stroke: red;
}

.dc-chart g.stack2 circle.dot {
  fill: red;
}

.dc-chart g.dc-tooltip path {
  fill: none;
  stroke: grey;
  stroke-opacity: .8;
}

.dc-chart path.area {
  fill: steelblue;
  fill-opacity: .3;
  stroke: none;
}

.dc-chart g.stack1 path.area {
  fill: green;
}

.dc-chart g.stack2 path.area {
  fill: red;
}

.dc-chart .node {
  font-size: 0.7em;
  cursor: pointer;
}

.dc-chart .node:hover {
  fill-opacity: .8;
}

.dc-chart .selected circle {
  stroke-width: 3;
  stroke: #ccc;
  fill-opacity: 1;
}

.dc-chart .deselected circle {
  stroke: none;
  fill-opacity: .5;
  fill: #ccc;
}

.dc-chart...

JavaScript

var data = [
    {"key":"KEY-1","state":"MA", "items":["orange", "meat", "bread"], "date":"Y16"},
    {"key":"KEY-2","state":"MA", "items":["apple", "bread"], "date":"Y15"},
    {"key":"KEY-3","state":"TX", "items":["bread"], "date":"Y16"},
    {"key":"KEY-4","state":"TN", "items":["apple", "bread"], "date":"Y16"},
    {"key":"KEY-5","state":"TN", "items":["apple", "orange"], "date":"Y15"},
    {"key":"KEY-6","state":"TN", "items": [], "date":"Y14"}
];

var cf = crossfilter(data);

//dimensions and groups:
var dates       = cf.dimension(function(d){ return d.date; });
var datesGroup  = dates.group().reduceCount(function(d){ return d.key; });
var states      = cf.dimension(function(d){ return d.state; });
var statesGroup = states.group().reduceCount(function(d){ return d.key; });
var itemsDim    = cf.dimension(function(d){ return d.items; });
var itemsGroup  = itemsDim.groupAll().reduce(reduceAdd, reduceRemove, reduceInitial).value();
itemsGroup.all  = myAllFunction;

//graphs:
var row = dc.rowChart("#rowchart");
row
    .renderLabel(true)
    .height(200)
    .dimension(itemsDim)
    .group(itemsGroup)
    .ordering(function(d){return -d.value;})
    .xAxis().ticks(3);
row.filterHandler(myFilterFunction);

var pie1 = dc.pieChart("#piechart1");
pie1.height(75).width(75).dimension(dates).group(datesGroup);

var pie2 = dc.pieChart("#piechart2");
pie2.height(75).width(75).dimension(states).group(statesGroup);

var bar = dc.barChart("#barchart");
bar.width(500).height(200)
   .dimension(itemsDim)
   .group(statesGroup, '1', sel_stack('1'))
   .stack(statesGroup, '2', sel_stack('2'))
   .renderHorizontalGridLines(true)
   .renderLabel(true)
   .legend(dc.legend())
   .gap(10)
   .yAxisLabel("count")
   .x(d3.scale.ordinal())
   .xUnits(dc.units.ordinal);
bar.filterHandler(myFilterFunction);
bar.on("renderlet", function(_chart){
    _chart.selectAll("rect.bar").on("click", _chart.onClick);
});


dc.renderAll();

function sel_stack(i) {
    return function(d) {
       ...