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

Dorena

apparently translate receives Not a Number value, but I can't see the g attribute here, can you create plunker with your code? – Humanly

I've tried your example with this directive, and it seems there is no problem. Try demo. – Aldenalder

github.com/krispo/angular-nvd3/issues/17 – Amalia

Answer 1

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.

Overstate

How u came up with this solution. (just curious to know ;) – Dorena

Answer 2

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.

Slavish

Answer 3

You need to disabled nvd3 resize events and empty some properties. Try to insert this in chart controller:

window.nv.charts = {};
window.nv.graphs = [];
window.nv.logs = {};
// remove resize listeners
window.onresize = null;

---

Or manage it with state events:

$rootScope.$on('$routeChangeStart', function(event, next, current) {
    if (typeof(current) !== 'undefined'){
        window.nv.charts = {};
        window.nv.graphs = [];
        window.nv.logs = {};
        // remove resize listeners
        window.onresize = null;
    }
});

Chaldron