d3.js - Uncaught TypeError: Cannot read property 'data' of undefined
For my issue, this turned out to be an incompatibility with d3.v3. I was using d3.v3, but the stable release of nvd3 uses d3.v2: https://github.com/novus/nvd3/commit/7e9b8c013c4d8e8ad5775062c438c842bc112585
I solved this by including the d3.v2 version that is provided in nvd3/lib: https://github.com/novus/nvd3/blob/master/lib/d3.v2.min.js
Found answer here: https://stackoverflow.com/a/20994982/469594
bjliu
Student of UC Berkeley, 2015. Currently interning at VMware (VCenter Operations Management). Previously interned at Flixster, better known as Rotten Tomatoes.
Updated on June 23, 2022Comments
-
bjliu almost 2 years
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 complain 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.org 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; }; }); }); }
-
bjliu almost 10 yearsThis may be the answer... nv.version = '1.1.15b'; var d3 = { version: "3.4.8" };
-
bjliu almost 10 yearsnvd3 uses d3 version 3.1.5, but i did not see 3.4.8
-
bjliu almost 10 yearsI have confirmed that this is truly the error. Thank you for your help!