admin管理员组文章数量:1384770
I have been getting stuck on 2 errors that I have been unable to figure out...I am trying to build a Scatter Plot out of some backend data. The BackEnd sends me a Javascript object (tabularData) with the information I need and I use it to create a graph. I am using ExtJS 4.2.2 and the most modern versions of d3.js and nv.d3.js
The first error is a uncaught typeerror that seems to plain about 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
The second error is an error that has to do with 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
I'm pretty sure it has something to do with d3.select, but it doesn't make sense that it is failing because buildData creates a legitimate Object. I also thought it might be because a lot of my x values and y values are the same, but using the live code scatter plot example on nvd3 shows me this is not the reason.
Here is my actual code for reference...
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;
};
});
});
}
I have been getting stuck on 2 errors that I have been unable to figure out...I am trying to build a Scatter Plot out of some backend data. The BackEnd sends me a Javascript object (tabularData) with the information I need and I use it to create a graph. I am using ExtJS 4.2.2 and the most modern versions of d3.js and nv.d3.js
The first error is a uncaught typeerror that seems to plain about 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
The second error is an error that has to do with 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
I'm pretty sure it has something to do with d3.select, but it doesn't make sense that it is failing because buildData creates a legitimate Object. I also thought it might be because a lot of my x values and y values are the same, but using the live code scatter plot example on nvd3 shows me this is not the reason.
Here is my actual code for reference...
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;
};
});
});
}
1 Answer
Reset to default 4For my issue, this turned out to be an inpatibility with d3.v3. I was using d3.v3, but the stable release of nvd3 uses d3.v2: https://github./novus/nvd3/mit/7e9b8c013c4d8e8ad5775062c438c842bc112585
I solved this by including the d3.v2 version that is provided in nvd3/lib: https://github./novus/nvd3/blob/master/lib/d3.v2.min.js
Found answer here: https://stackoverflow./a/20994982/469594
本文标签： javascriptd3jsUncaught TypeError Cannot read property 39data39 of undefinedStack Overflow
版权声明：本文标题：javascript - d3.js - Uncaught TypeError: Cannot read property 'data' of undefined - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744452965a2606847.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论