d3版本4中的堆栈条形图

Question

我读过Scott Murray撰写的“网络互动数据可视化”，但这本书使用的是d3版本3。我试图解决它，但有些问题发生了，我的代码在下面。我得到关于“y：预期长度”的错误，NaN“。”，也许我的堆栈功能不起作用。但是，我不知道如何解决它。我需要有人帮助我。

 // declare variable
var svgWidth = 500,
    svgHeight = 300,
    svgData = [],
    maxValue = 16;

svgData = getData(svgData);    

// set stack color
var color = d3.scaleOrdinal(d3.schemeCategory10);

// create stack layout
var stack = d3.stack();
stack(svgData);          

// define x,y scale
var xScale = d3.scaleBand()
               .domain(d3.range(svgData[0].length))
               .rangeRound([0, svgWidth])
               .paddingInner(0.05),
    yScale = d3.scaleLinear()
               .domain([0, d3.max(svgData, function(d){
                       return d3.max(d, function(d){
                           d.y0 + d.y;
                       });
                })])
               .range([0, svgHeight])
               .clamp(true);

// create svg
var svg = d3.select("body")
            .append("svg")
            .attr("width", svgWidth)
            .attr("height", svgHeight);

// add group and fill color for each row of data
var group = svg.selectAll("g")
               .data(svgData)
               .enter()
               .append("g")
               .style("fill", function(d, i){
                   return color(i);
                });

// add a rect for each data value
var rect = group.selectAll("rect")
                .data(function(d){
                    return d;
                })
                .enter()
                .append("rect")
                .attr("x", function(d, i){
                    return xScale(i);
                })
                .attr("y", function(d){
                    return yScale(d.y0);
                })
                .attr("width", xScale.bandwidth())
                .attr("height", function(d){
                    return yScale(d.y);
                });

// get data
function getData(data){
    var temp =0,
        tempArr = [];    
    data = [];

    for(var i=0; i<3; i++){
        tempArr = [];
        for(var j=0; j<5; j++){
            temp = Math.round(Math.random() *maxValue);
            tempArr.push( { x: j, y: temp });
        }
        data.push(tempArr);
    }
    return data;
}