angularjs-nvd3 Директивы графике клещи не работает

Question

Я работаю с директивами cmaurer nvd3 с angularjs и вы можете увидеть его here

Я хочу изменить ось й тактов сосчитайте до 3 (начало, середины, конечные даты), но свойства nvd3 ticks (xaxisticks, xaxistickvalues) не работают.

Я даже пытался использовать временную метку unix, но не удался. Есть мысли?

 <nvd3-line-chart 
      ... 
      xAxisTickFormat="xAxisTickFormatFunction()" 
      yAxisTickFormat="yAxisTickFormatFunction()" 
      xaxistickvalues="xAxisTickValuesFunction()" // not work 
      xaxisticks="3" // not work 
      showXAxis="true" 
      showYAxis="true" 
      interactive="true" 
      ... 
      forcey="[]" 
      > 
      <svg></svg> 
     </nvd3-line-chart> 

Answer 1

кажется все линейные графики в nvd3 имеет тики жёстко, поэтому любые тики настройка игнорируется:

xAxis 
     .scale(x) 
     .ticks(availableWidth/100) 
     .tickSize(-availableHeight, 0); 

Смотрите здесь: https://github.com/novus/nvd3/issues/70. К сожалению, кажется, что он работает, нужно раскошеливать библиотеку или ждать, пока не будет выпущена версия 2.0, надеясь решить эту проблему среди других ошибок.

Answer 2

Не идеальное решение, но было быстрым изменением, которое по большей части устраняет дублирование. Добавьте кэш тиков по мере их создания, и поскольку они созданы по порядку, можно устранить последовательные обманы.

controller: function($scope) { 
     var vm = this; 

     vm.xAxisTick = ""; // <- cache the x-axis ticks here... 
     vm.x2AxisTick = ""; // <- cache the x2-axis ticks here... 

     vm.options = { 
      chart: { 
       type: 'lineWithFocusChart', 

       xAxis: { 
        scale: d3.time.scale(), 
        tickFormat: function(d) { 
         var tick = moment.unix(d).format('h:mm a'); 

         // compare tick versus the last one, 
         // return empty string if match 
         if (vm.xAxisTick === tick) { 
          return ""; 
         } 

         // update our latest tick, and pass along to the chart 
         vm.xAxisTick = tick; 
         return tick; 
        }, 
        rotateLabels: 30, 
        showMaxMin: false 
       }, 

       x2Axis: { 
        scale: d3.time.scale(), 
        tickFormat: function(d) { 
         var tick = moment.unix(d).format('h:mm a'); 

         // compare tick versus the last one, 
         // return empty string if match 
         if (vm.x2AxisTick === tick) { 
          return ""; 
         } 

         // update our latest tick, and pass along to the chart 
         vm.x2AxisTick = tick; 
         return tick; 
        }, 
        rotateLabels: 30, 
        showMaxMin: false      
       }, 

       yAxis: { 
        axisLabel: 'Why', 
        axisLabelDistance: 30, 
        rotateYLabel: false 
       } 

      } 
     };