Д3.ошибка js: недопустимое значение для преобразования атрибута= " translate(NaN, 5)"

Я использую nvd3.js вместе с angularjs, вот код.

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

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

и это бросает ошибку, на изменение размера страницы.

ошибка: недопустимое значение атрибута transform= " translate (NaN,5)" d3.js: 590

9
angularjs d3.js nvd3.js

3 ответов

очистить onresize при изменении маршрута.

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

IMO более чистое решение, которое в настоящее время решило эту проблему для меня.

1

вы не можете установить строку как значение x. В вашем xFunction вы вернетесь д. ключ (который является строкой). Если вам нужно использовать строковые ключи, вам нужно прокси-значение через масштаб.

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

Это возвращает целое число, и NaN исчезнет. подробнее о том, как Весы работают.

2

нужно отключен nvd3 события resize и пустые некоторые свойства. Попробуйте вставить это в Chart controller:

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

или управлять им с помощью государственных мероприятий:

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