Errore d3.js: valore non valido per <g> attributo transform = "translate (NaN, 5)"

Question

Sto usando nvd3.js insieme a angularjs, ecco il codice.

<nvd3-pie-chart data="exampleData1" 
     class="pie" 
     id="labelTypePercentExample" 
     x="xFunction()" 
     y="yFunction()" 
     showLabels="true" 
     pieLabelsOutside="true" 
     showLegend="true" 
     labelType="percent"> 
    </nvd3-pie-chart> 

e js è.

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

ed è un errore di lancio, sul ridimensionamento della pagina.

Errore: valore non valido per l'attributo trasformare = "tradurre (Nan, 5)" d3.js: 590

Answer 1

Cancella onResize quando cambia rotta.

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

IMO una soluzione più pulita che al momento ha risolto questo problema per me.

Answer 2

Non è possibile impostare stringa come valore X. Nella tua xFunction restituisci d.key (che è una stringa). Se è necessario utilizzare le chiavi stringa, è necessario eseguire il proxy del valore tramite scala.

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

Che restituisce un numero intero e il NaN sarà scomparso. More info on how scales work.

Answer 3

È necessario disabilitare gli eventi di ridimensionamento nvd3 e svuotare alcune proprietà. Prova a inserire questo controller grafico:

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

---

o il gestore con gli eventi di stato:

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