javascript - 并非所有刻度都显示在 nvd3 折线图中

Question

我正在尝试创建折线图。

为折线图指定刻度:7，但只显示 6 个刻度。

这是数据和选项值

this.options = {
      chart: {
        type: 'lineChart',
        showYAxis:false,
        showLabels:true,
        showLegend:false,
        reduceXTicks: false,
        margin : {
          top: 20,
          right: 20,
          bottom: 40,
          left:20
        },
        x: function(d){ return d.x; },
        y: function(d){ return d.y; },
        xAxis: {
          tickFormat:function(d) { 
            return d3.time.format('%b %d')(new Date(d)); 
          },
          ticks:7
        }
      }
    };

    this.data=[
      {
        values: [    
        {x: new Date('2015-03-23'),y:10},
        {x:new Date('2015-03-24'),y:20},
        {x:new Date('2015-03-25'),y:5},
        {x: new Date('2015-03-26'),y:10},
        {x:new Date('2015-03-27'),y:15},
        {x:new Date('2015-03-28'),y:20},
        {x:new Date('2015-03-29'),y:40}
        ],
        key: 'Cosine Wave',
        color: '#d0021c',
        area:true
      }
    ]

查看骗子 - https://plnkr.co/edit/7zg62ezs730i40U0GTHy?p=preview

如有任何帮助，我们将不胜感激。

Answer 1

我发现的一个解决方法是使用 tickValues 设置刻度。

var xAxis = d3.axisBottom(x).tickValues([1, 2, 3, 5, 8, 13, 21]);

https://github.com/d3/d3-axis/blob/master/README.md#axis_tickValues

或者您可以将刻度值传递给指令:

<nvd3-line-chart  
  data="graphData"   
  xAxisTickValues="xAxisTicks"  
</nvd3-line-chart> 

然后在范围内:

$scope.xAxisTicks = function(){  
    return [new Date('2013-12-31'), new Date('2014-1-1'), new Date('2014-1-2')];  
  } 

另请注意“如果未设置刻度格式，则刻度参数仍将传递给秤的tickFormat 函数”