(D3-Liniendiagramm) Fehler: <path> Attribut d: Voraussichtliche Anzahl, "MNaN, NaNLNaN, NaN"

Question

Ich bin sehr neu in D3.js. Ich versuche, ein Liniendiagramm mit D3.js und angularjs zu erstellen. Ich erhalte den obigen Fehler.

Die Daten in der Konsole, die ich bin, die durch Rest Dienstleistungen sehen aus wie

[{"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}] 

unter meinem Controller-Klasse-Code ist, in dem das Diagramm ich bin anhängen.

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

Bitte führen Sie mich, um das Diagramm zu erstellen.

Vielen Dank im Voraus.

Answer 1

Ich habe die Lösung gefunden. Im obigen Code ist die Implementierung von $ scope.chartConfig falsch. Die richtige Methode umgesetzt werden soll

$scope.chartConfig = {data:responseNifty}; 

anstelle von

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