（D3折線圖）錯誤：<path>屬性d：預期編號，「MNaN，NaNLNaN，NaN」

我對D3.js很新。我正在嘗試使用D3.js和angularjs來構建折線圖。我收到上述錯誤。（D3折線圖）錯誤：<path>屬性d：預期編號，「MNaN，NaNLNaN，NaN」

在控制檯我穿過休息服務該數據看起來像

[{"id":1,"time":"Jun 19, 2017 13:17:21","ltp":9620.5,"time1":20170619}, 
    {"id":2,"time":"Jun 20, 2017 13:27:21","ltp":9617.7,"time1":20170620}, 
    {"id":3,"time":"Jun 21, 2017 13:36:51","ltp":9615.3,"time1":20170621}]

下面是我的控制器類的代碼中，我正在追加圖表。

var niftyController = function($scope,$http, $state, $stateParams, $location){ 
    var niftyController = this; 
    $scope.loadNiftyData = function(){ 
     $http.get('/nifty') 
     .then(function successCallback(response){ 
      var responseNifty = JSON.parse(response.data); 

      $scope.chartConfig={ 
       data:[{}] 
      }; 

      $scope.chartConfig.data.push(responseNifty); 
      console.log(response.data); 

      var chartConfig = $scope.chartConfig; 
      var svgConfig = { id:"mySvg", width:600, height:300, margin : { top: 20, right: 20, bottom: 20, left: 50 } }; 
      var bodySelection = d3.select("body"); var svgSelection = bodySelection.append("svg") .attr("id", svgConfig.id) .attr("width",svgConfig.width) .attr("height",svgConfig.height); 

      xScale = d3.scale.linear() .range([ svgConfig.margin.left, svgConfig.width - svgConfig.margin.right ]) .domain([ d3.min(chartConfig.data, function(d) {return +d.time1;}), d3.max(chartConfig.data, function(d) {return +d.time1;}) ]); 
      yScale = d3.scale.linear() .range([ svgConfig.height - svgConfig.margin.top, svgConfig.margin.bottom ]) .domain([ d3.min(chartConfig.data, function(d) {return +d.ltp;}), d3.max(chartConfig.data, function(d) {return +d.ltp;}) ]); 

      xAxis = d3.svg.axis() .scale(xScale); 
      yAxis = d3.svg.axis() .orient("left") .scale(yScale); 

      svgSelection.append("svg:g") .attr("id","xAxis") .call(xAxis); 
      d3.select("#xAxis") .attr("transform", "translate(0," + (svgConfig.height - svgConfig.margin.bottom) + ")"); 
      svgSelection.append("svg:g") .attr("id","yAxis") .call(yAxis); 
      d3.select("#yAxis") .attr("transform", "translate(" + (svgConfig.margin.left) + ",0)"); 
      var lineSelection = d3.svg.line() .x(function(d){ return xScale(d.time1); }) .y(function(d){ return yScale(d.ltp) }); 
      svgSelection.append("svg:path") .attr('d', lineSelection(chartConfig.data)) .attr('stroke', 'green') .attr('stroke-width', 2) .attr('fill', 'none'); 

     }, function errorCallback(response) { 

     }); 
    }; 
    $scope.loadNiftyData(); 
};

請指導我構建圖表。

在此先感謝。

來源

2017-06-21 Syed Burhan

你必須解析日期和使用時間尺度。你不能簡單地做'+ d.time'，那不是一個包含數字的字符串。 –

我對x和y軸分別使用「time1」和「ltp」。「time1」和「ltp」包含數字。 –

現在我明白了。雖然不是最好的名字選擇。 –

我找到了解決方案。

在上面的代碼中，執行$ scope.chartConfig是錯誤的。要實現正確的方法是

$scope.chartConfig = {data:responseNifty};

代替

$scope.chartConfig={ 
    data:[{}] 
}; 
$scope.chartConfig.data.push(responseNifty);

來源

2017-06-22 09:07:21

（D3折線圖）錯誤：<path>屬性d：預期編號，「MNaN，NaNLNaN，NaN」

回答

相關問題