d3.js Error : Invalid value for 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

apparently translate receives Not a Number value, but I can't see the g attribute here, can you create plunker with your code? — maurycy, Jul 10 '14 at 11:20
I've tried your example with [this](http://krispo.github.io/angular-nvd3/#/) directive, and it seems there is no problem. Try [demo](http://plnkr.co/edit/QwzhMO?p=preview). — krispo, Jul 10 '14 at 21:07

score 2 · Answer 1 · answered Nov 19 '14 at 19:06

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.

R.Creager · Accepted Answer · 2015-08-24T20:04:14.820

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.

edited Aug 24 '15 at 20:04

answered Aug 24 '15 at 17:13

R.Creager

72
3

How u came up with this solution. (just curious to know ;) – vipin Aug 25 '15 at 04:57

score 0 · Answer 3 · answered Mar 05 '15 at 10:53

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;
    }
});

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

3 Answers3