d3.js Error : Invalid value for <g> attribute transform="translate(NaN,5)"

angularjs, d3.js, nvd3.js

Solution

Clear onresize when the route changes.

$scope.$on('$locationChangeStart', function(event) {
    window.onresize = null;
});

IMO a cleaner solution that currently resolved this issue for me.

Problem

I am using nvd3.js along with angularjs, here is the code. ``` <nvd3-pie-chart data="exampleData1" class="pie" id="labelTypePercentExample" x="xFunction()" y="yFunction()" showLabels="true" pieLabelsOutside="true" showLegend="true" labelType="percent"> </nvd3-pie-chart> ``` and js is. ``` myapp.controller('ExampleCtrl1',function($scope,$timeout){ $scope.exampleData1 = [ { key: "Ongoing", y: 20 }, { key: "completed", y: 0 } ]; $timeout(function() { $scope.exampleData1 = [ { key: "Ongoing", y: 20 }, { key: "completed", y: 2 } ]; }, 10); $scope.xFunction = function(){ return function(d) { return d.key; }; } $scope.yFunction = function(){ return function(d) { return d.y; }; } }) ``` and it is throwing error, on page resizing. Error : Invalid value for attribute transform="translate(NaN,5)" d3.js:590

Original source