d3.js Fehler: Ungültiger Wert für <g> attribute transform = "translate (NaN, 5)"

Question

Ich verwende nvd3.js zusammen mit angularjs, hier ist der 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> 

und js ist.

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

und es ist Fehler werfen, auf Seitengröße.

Fehler: ungültiger Wert für das Attribut Transformation = "übersetzen (NaN, 5)" d3.js: 590

Answer 1

Klar onresize, wenn die Route ändert.

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

IMO eine sauberere Lösung, die dieses Problem für mich gelöst hat.

Answer 2

Sie können als X-Wert nicht gesetzt String. In Ihrer xFunction geben Sie d.key zurück (was eine Zeichenkette ist). Wenn Sie Zeichenfolgenschlüssel verwenden müssen, müssen Sie den Wert durch Skalierung übernehmen.

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

Das gibt eine ganze Zahl zurück und das NaN wird weg sein. More info on how scales work.

Answer 3

Sie müssen nvd3 resize events deaktivieren und einige Eigenschaften leeren. Versuchen Sie dies in Grafik-Controller einzufügen:

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

---

oder verwalten sie mit staatlichen Veranstaltungen:

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