無法在NVD3顯示所有x軸刻度值

Question

歷史條形圖：

我使用NVD3歷史條形圖，我不能夠顯示所有的X軸的刻度值。我能夠只顯示5個值而不是全部數組。請找到我的代碼

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


var tickMarks = [2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011]; 
app.controller('MainCtrl', function($scope) { 
    $scope.options = { 
      chart: { 
       type: 'historicalBarChart', 
       height: 450, 
       margin : { 
        top: 20, 
        right: 20, 
        bottom: 60, 
        left: 50, 
        showXAxis:false, 
        showYAxis:false 
       }, 
       x: function(d){return d[0];}, 
       y: function(d){return d[1];}, 
       showValues: true, 
       reduceXTicks:"false", 
       showXAxis:true, 
       showYAxis:false, 
       /*valueFormat: function(d){ 
        return d3.format(',.1f')(d); 
       },*/ 
       transitionDuration: 500, 
       //forceX: [1], 
       showMaxMin: false, 
       xAxis: { 
        tickSize:'10', 
        values: [1,2,3,4,5,6,7,8,9,10], 
        axisLabel: 'X Axis', 

        tickFormat: function(d) { 

         return d; 

        }, 
        //reducexTicks:true, 
        //rotateLabels: 10, 
        showMaxMin: false, 


       }, 
       yAxis: { 

        //axisLabel: 'Y Axis', 
        //axisLabelDistance: 35, 
        /*tickFormat: function(d){ 
         return d3.format(',.1f')(d); 
        }*/ 
       } 

      } 
     }; 

     $scope.data = [ 
      { 
       "key" : "Quantity" , 
       "bar": true, 

       "values" : [ [ 1 , 4] , [ 2 , 2] , [ 3 , 1] , [ 4 , 3] , [ 5 , 4] , [ 6 , 5] , [ 7 , 4] , [ 8 , 7] , [ 9 , 6] , [ 10 , 4] , [ 11 , 6] , [ 12 , 5] , [ 13 , 6] , [ 14 , 4] , [ 15 , 5] , [ 16 , 4] , [ 17 , 5] , [ 18 , 8] , [ 19 , 5] , [ 20 , 6] , [ 21 , 5] , [ 22 , 6] , [ 23 , 6] , [ 24 , 6] , [ 25 , 7] , [ 26 , 6] , [ 27 , 5] , [ 28 , 4], [29, 5], [30, 4], [31, 7] ], 
       color:'blue' 
      }]; 
}); 

請幫我解決這個問題。

Answer 1

你幾乎得到它：

reduceXTicks 
staggerLabels 

但你需要在刻度值的所有值：

// !!! I have not tested this on Your code, but this magic works for me. 
// You also need to declare data first, then options. 
values: $scope.data.values.map(function(d) { return d[0]; })