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

Question

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

Answer 1

You can't set string as X value. In your xFunction you return d.key (which is a string). If you need to use string keys you need to proxy the value through scale.

var myScale = d3.scale.ordinal().domain(['Ongoing', 'completed']).range([0,1]);
// ... later in xFunction
return myScale(d.key);

That returns an integer and the NaN will be gone. More info on how scales work.

Answer 2

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.