Question

我正在使用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;
  };
 }
})

并且在页面调整大小时抛出错误。

错误：属性转换的值无效=“translate（NaN，5）” d3.js：590

Answer 1

您无法将字符串设置为X值。在你的xFunction中，你返回d.key（这是一个字符串）。如果您需要使用字符串键，则需要通过缩放代理值。

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

返回一个整数，NaN将消失。 More info on how scales work.

Answer 2

路线更改时清除onresize。

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

IMO是一个更清洁的解决方案，目前为我解决了这个问题。

Answer 3

您需要禁用nvd3 resize事件并清空一些属性。尝试将其插入图表控制器中：

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

d3.js错误：<g>属性转换的值无效=＆＃34;翻译（NaN，5）＆＃34; </g>

3 个答案: