D3 多列相对堆栈图

我目前正在修改以下示例以生成多水平相对堆栈图。以下示例是"单个"堆栈图示例。

http://jsfiddle.net/zDkWP/

这是我的版本，但是我得到了 NaN X 和宽度值，我正在寻找找出原因。谢谢。

在SVG中，每个结构如下： -

g[ g [rect， rect， rect]]， g[

g [rect， rect， rect]]

这是我的代码：http://jsfiddle.net/scottietom/7c3vb4e9/

        var dataset = [
                       [
                        [{x: 0,y: 100}],[{x: 0,y: 30}],[{x: 0,y: 50}]], 
                        [[{x: 0,y: 100}],[{x: 0,y: 30}],[{x: 0,y: 50}]]
                      ];
        //Set up stack method
        var stack = d3.layout.stack();
        //Data, stacked
        for (i=0; i<dataset.length; i++) {
          stack(dataset[i]);
        }
        //Set up scales
        var xScale = d3.scale.linear()
            .domain([0, d3.max(dataset, function (d) {
                return d3.max(d, function (d) {
                return d.y0 + d.y;
            });
        })])
        .range([0, w]);
        //Easy colors accessible via a 10-step ordinal scale
        var colors = d3.scale.category10();
        //or make your own colour palet
        var color = d3.scale.ordinal()
            .range(["#1459D9", "#148DD9", "#87ceeb", "#daa520"]);
        //Create SVG element
        var svg = d3.select(".pathanalysis_diagram")
            .append("svg")
            .attr("width", w + margin.left + margin.right)
            .attr("height", h + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
        // Add a group for each row of data
        var groups = svg.selectAll("g")
            .data(dataset)
            .enter()
            .append("g")
            .style("fill", function (d, i) {
            return color(i);
        });
        // Add a rect for each data value
        var rects = groups.selectAll("rect")
            .data(function (d) {
                return d;
            })
            .enter()
            .append("rect")
            .attr("x", function (d) {
                return xScale(d.y0);
            })
            .attr("y", 50)
            .attr("height", 50)
            .attr("width", function (d) {
                return xScale(d.y);
            });

arrayOfDatasets.forEach(function (dataset) {stack(dataset); });

var xScale = d3.scale.linear()
    .domain([0, d3.max(arrayOfDatasets, function (dataset) {      
      return d3.max(dataset, function (d) {
        return d3.max(d, function (d) {
            return d.y0 + d.y;
        });
      })
    })])
    .range([0, w]);

var groupOfGroups = svg.selectAll("g.toplevel")
    .data(arrayOfDatasets)
    .enter()
    .append("g")
    .attr("class", "toplevel")
    .attr("transform", function(d, i ) {return "translate(0, " + (-i * 55) + ")"; });   
// Add a group for each row of data
var groups = groupOfGroups.selectAll("g.dataset")
    .data(function(d) {return d; })
    .enter()
    .append("g")
    .attr("class", "dataset")
    .style("fill", function (d, i) {
    return color(i);
});