Javascript d3.js-未捕获类型错误：无法读取属性'；数据'；未定义的

我一直被两个错误困扰，我一直无法找出…我试图建立一个散点图出一些后端数据。后端向我发送一个Javascript对象（tablerData），其中包含我需要的信息，我使用它创建一个图形。 我使用的是extjs4.2.2以及最新版本的d3.js和nv.d3.js

第一个错误是一个未捕获的typeerror，它似乎在抱怨nv.d3.js

Uncaught TypeError: Cannot read property 'data' of undefined nv.d3.js:11193
(anonymous function) nv.d3.js:11193
attrFunction d3.js:597
(anonymous function) d3.js:884
d3_selection_each d3.js:890
d3_selectionPrototype.each d3.js:883
d3_selectionPrototype.attr d3.js:580
updateInteractiveLayer nv.d3.js:11192

第二个错误是与d3.js有关的错误

Error: Invalid value for <g> attribute transform="translate(NaN,5)" d3.js:591
attrConstant d3.js:591
(anonymous function) d3.js:884
d3_selection_each d3.js:890
d3_selectionPrototype.each d3.js:883
d3_selectionPrototype.attr d3.js:580
(anonymous function) nv.d3.js:5010
(anonymous function) d3.js:884
d3_selection_each d3.js:890
d3_selectionPrototype.each d3.js:883
chart nv.d3.js:4872
d3_selectionPrototype.call d3.js:897
(anonymous function) nv.d3.js:11818
(anonymous function) d3.js:8562
d3_selection_each d3.js:890
d3_transitionPrototype.each d3.js:8560
chart nv.d3.js:11729
d3_selectionPrototype.call d3.js:897
chart.update nv.d3.js:11738
window.onresize nv.d3.js:904
window.onresiz

错误：属性transform=“translate（NaN，5）”d3的值无效。js:591
属性常量d3.js:591
（匿名函数）d3.js:884
d3_选择_每个d3.js:890
d3_selectionPrototype.each d3.js:883
d3_selectionPrototype.attr d3.js:580
（匿名函数）nv.d3.js:5010
（匿名函数）d3.js:884
d3_选择_每个d3.js:890
d3_selectionPrototype.each d3.js:883
图nv.d3.js:4872
d3_selectionPrototype.call d3.js:897
（匿名函数）nv.d3.js:11818
（匿名函数）d3.js:8562
d3_选择_每个d3.js:890
d3_transitionPrototype.each d3.js:8560
图nv.d3.js:11729
d3_selectionPrototype.call d3.js:897
chart.update nv.d3.js:11738
window.onresize nv.d3.js:904
window.onresiz

我很确定它与d3.select有关，但它失败的原因是buildData创建了一个合法的对象，这是没有意义的。我还认为这可能是因为我的很多x值和y值是相同的，但使用nvd3.org上的显示我这不是原因

这是我的实际代码供参考

 buildScatterPlot: function buildScatterPlot(tabularData){
     Ext.vcops.chrome.D3js.load(function() {
        Ext.vcops.chrome.nvd3.load(function(){

            nv.addGraph(function() {
                var chart = nv.models.scatterChart()
                    .showDistX(false)    //showDist, when true, will display those little distribution lines on the axis.
                    .showDistY(false)
                    .transitionDuration(350)
                    .color(d3.scale.category20().range());

                //Configure how the tooltip looks.
                chart.tooltipContent(function(key) {
                    return '<h3>' + key + '</h3>';
                });

                //Axis settings
                var xAxisLabel = tabularData.columns[1].label;
                var yAxisLabel = tabularData.columns[2].label;
                var xFormat;
                var yFormat;
                var xUnitId = tabularData.columns[1].unit === null ? null : tabularData.columns[1].unit.unitId;
                var yUnitId = tabularData.columns[2].unit === null ? null : tabularData.columns[2].unit.unitId;
                switch(xUnitId){
                    case "percent":
                        xFormat = '.02%'
                        break;
                    case null:
                    default:
                        xFormat = 'd'
                        break;
                }
                switch(yUnitId){
                    case "percent":
                        yFormat = '.02%';
                        break;
                    case null:
                    default:
                        yFormat = 'd';
                        break;
                }
                chart.xAxis
                    .axisLabel(xAxisLabel)
                    .tickFormat(d3.format(xFormat));
                chart.yAxis
                    .axisLabel(yAxisLabel)
                    .tickFormat(d3.format(yFormat));

                var d3data = buildData(xUnitId, yUnitId);
                console.log(d3data);
                d3.select('#chart svg')
                    .datum(d3data)
                    .call(chart);
                nv.utils.windowResize(chart.update);

                return chart;
            });

            /**************************************
             * Data generator
             */
            function buildData(xUnitId, yUnitId) { //# groups,# points per group
                var data = [];
                var skipped = 0;
                for (var i = 0; i < tabularData.totalRowCount; i++) {
                    var xVal;
                    var yVal;
                    if(tabularData.rows[i].cells[2].renderedValue === "-"){
                        skipped++;
                        continue;
                    }
                    switch(xUnitId){
                        case "percent":
                            xVal = tabularData.rows[i].cells[1].value / 100.0;
                            break;
                        case null:
                            xVal = tabularData.rows[i].cells[1].value;
                            break;
                    }
                    if(tabularData.rows[i].cells[2].renderedValue === "-"){
                        skipped++;
                        continue;
                    }
                    switch(yUnitId){
                        case "percent":
                            yVal = tabularData.rows[i].cells[2].value / 100.0;
                            break;
                        case null:
                            yVal = tabularData.rows[i].cells[2].value;
                            break;
                    }
                    if(xVal === null || yVal === null){
                        continue;
                    }
                    console.log(xVal);
                    console.log(yVal);
                    data.push({
                        key: tabularData.rows[i].objectIdentifier.resourceKey.resourceName,
                        values: []
                    });
                    data[i-skipped].values.push({
                        x: xVal,
                        y: yVal,
                        size: Math.random()  //Configure the size of each scatter point
                    });
                }
                return data;
            };
        });
    });
}

buildScatterPlot：函数buildScatterPlot（tablerdata）{
Ext.vcops.chrome.D3js.load（函数（）{
Ext.vcops.chrome.nvd3.load（函数（）{
nv.addGraph（函数（）{
var chart=nv.models.scatterChart（）
.showDistX（false）//showDist为true时，将在轴上显示这些小分布线。
.炫耀（假）
.过渡期（350）
.颜色（d3.比例.类别20（）.范围（））；
//配置工具提示的外观。
图表.工具提示内容（函数（键）{
返回“”+键+“”；
});
//轴设置
var xaxislab=tablerdata.columns[1].label；
var yaxislab=tablerdata.columns[2].label；
var-xFormat；
变量形式；
var xUnitId=tablerdata.columns[1]。unit==null？null:tablerdata.columns[1]。unit.unitId；
var yUnitId=tablerdata.columns[2]。unit==null？null:tablerdata.columns[2]。unit.unitId；
开关（xUnitId）{
案例“百分比”：
xFormat='.02%'
打破
大小写为空：
违约：
xFormat='d'
打破
}
交换机（yUnitId）{
案例“百分比”：
yFormat='.02%'；
打破
大小写为空：
违约：
yFormat='d'；
打破
}
chart.xAxis
.axisLabel（xAxisLabel）
.tickFormat（d3.format（xFormat））；
图1.yAxis
.axisLabel（yAxisLabel）
.tickFormat（d3.format（yFormat））；
变量d3data=buildData（xUnitId，yUnitId）；
console.log（d3data）；
d3.选择（“#图表svg”）
.基准面（D3数据）
.电话（图表）；
nv.utils.windowResize（图表更新）；
收益表；
});
/**************************************
*数据发生器
*/
函数buildData（xUnitId，yUnitId）{/#组，每组点
var数据=[]；
var=0；
对于（变量i=0；i

对于我的问题，这是一个i