NVD3折れ線グラフX軸には最初の9個の値しか表示されません。

Question

はthis Plunkerにフォークされています。私は52週間のデータを持っていますが、折れ線グラフのx軸は最初の9週間のデータだけを取っています。以下の私のコード見つけてください -

var app = angular.module('plunker', ['nvd3']); 

app.controller('MainCtrl', function($scope) { 
    $scope.options = { 
      chart: { 
       type: 'lineChart', 
       height: 450, 
       margin : { 
        top: 20, 
        right: 20, 
        bottom: 40, 
        left: 55 
       }, 
        showControls: false, 
        showValues: true, 
        x: function (d) { return d.x; }, 
        y: function (d) { return d.y; }, 
        useInteractiveGuideline: true, 
        duration: function (d, i) { return parseInt(i + 1) * 600; }, 
        xAxis: { 
         axisLabel: 'Week', 
         tickFormat: function (d) { 
          return d 
         }, 
         reduceXTicks:false, 
         staggerLabels:false 
        }, 
        yAxis: { 
         axisLabel: 'Loss', 
         tickFormat: function (d) { 
          return d3.format(",.2f")(d) 
         }, 
         //axisLabelDistance: -10 
        } 
      }, 
     }; 

     $scope.data = sinAndCos(); 

     /*Random Data Generator */ 
     function sinAndCos() { 
      var ApplicableLossHighData = [{"x":"1","y":"1.65"},{"x":"2","y":"1.6"},{"x":"3","y":"1.65"},{"x":"4","y":"1.55"},{"x":"5","y":"1.7"},{"x":"6","y":"1.45"},{"x":"7","y":"1.65"},{"x":"8","y":"1.65"},{"x":"9","y":"1.55"},{"x":"10","y":"1.6"},{"x":"11","y":"1.6"},{"x":"12","y":"1.55"},{"x":"13","y":"1.75"},{"x":"14","y":"1.65"},{"x":"15","y":"1.65"},{"x":"16","y":"1.7"},{"x":"17","y":"1.65"},{"x":"18","y":"1.8"},{"x":"19","y":"1.8"},{"x":"20","y":"1.7"},{"x":"21","y":"1.8"},{"x":"22","y":"1.75"},{"x":"23","y":"1.7"},{"x":"24","y":"1.65"},{"x":"25","y":"1.6"},{"x":"26","y":"1.65"},{"x":"27","y":"1.65"},{"x":"28","y":"1.5"},{"x":"29","y":"1.55"},{"x":"30","y":"1.55"},{"x":"31","y":"1.5"},{"x":"32","y":"1.45"},{"x":"33","y":"1.7"},{"x":"34","y":"1.65"},{"x":"35","y":"1.6"},{"x":"36","y":"1.65"},{"x":"37","y":"1.65"},{"x":"38","y":"1.65"},{"x":"39","y":"1.85"},{"x":"40","y":"1.9"},{"x":"41","y":"1.9"},{"x":"42","y":"1.8"},{"x":"43","y":"1.9"},{"x":"44","y":"1.85"},{"x":"45","y":"1.85"},{"x":"46","y":"1.8"},{"x":"47","y":"1.8"},{"x":"48","y":"1.8"},{"x":"49","y":"1.55"},{"x":"50","y":"1.5"},{"x":"51","y":"1.45"},{"x":"52","y":"1.5"}] 
      return [{values: ApplicableLossHighData,  //values - represents the array of {x,y} data points 
        key: 'High', //key - the name of the series. 
        color: '#ff7f0e', //color - optional: choose your own line color. 
        }] 
     } 
}); 

を出力：

これを解決するには、私を助けてください。

Answer 1

問題は、文字列値をx関数に渡すことです。軸は「5」の横に「52」を配置します。あなたはする必要があります：

x: function (d) { return +d.x; }, 
y: function (d) { return +d.y; }, 

文字列の値をnumberに強制することに注意してください。