單點在nvd3折線圖中未顯示

Question

我正在使用以下配置在角度nvd3的幫助下顯示我的折線圖。問題是，如果在邊緣附近只有一個點時顯示圖表，那麼除非它被懸停，否則它不會被顯示。

$scope.options = { 
     chart: { 
      type: 'lineChart', 
      forceY:[0],    
      height: 450, 
      margin : { 
       top: 30, 
       right: 70, 
       bottom: 68, 
       left: 90 
      }, 
      x: function(d){ return d[0]; }, 
      y: function(d){ return d[1]; }, 
      useInteractiveGuideline: false, 
      xDomain: [moment($scope.calenderStartDate).valueOf(), moment($scope.calenderEndDate).valueOf()],    
      lines:{ 
          dispatch: { 
           elementClick: function(e){ 
            console.log(e); 
            handleDataForTable(e.point.x,e.series.key); 
            $scope.api.refresh(); 
           }, 
           elementMouseout: function(){} 
          } 
       }, 
      xScale: d3.time.scale().clamp(true), 
      xAxis: { 
       tickFormat: function(d){ 
        return d3.time.format('%d-%b-%y')(new Date(d)) 
       },      
       rotateLabels:-30 

      }, 

     legend: { 
       vers: 'furious' 
     }, 
     showLegend:false, 
      yAxis: { 
       axisLabel: 'No of Bookings', 
       tickFormat: function(d){ 
        return d3.format('d')(d); 
       } 
      }, 
      callback: function(chart){ 
       console.log("!!! lineChart callback !!!"); 
      }, 
      defined:function(d) { return !isNaN(d[1]); } 
     }, 
     title: { 
      enable: false, 
      text: 'Title for Line Chart' 
     }, 
     subtitle: { 
      enable: false, 
      text: '', 
      css: { 
       'text-align': 'center', 
       'margin': '10px 13px 0px 7px' 
      } 
     }, 
     caption: { 
      enable: false, 
      html: '', 
      css: { 
       'text-align': 'justify', 
       'margin': '10px 13px 0px 7px' 
      } 
     } 
    };   

}

Answer 1

如果你的數據的長度是1，那麼從$ scope.options.chart.forceY刪除forceY這樣的：

刪除$ scope.options.chart [ 'forceY' ]

該圖表將得到由d3正確呈現的圖表。問題是，如果單點不渲染，則在d3中使用'forceY'選項。您必須通過懸停來查找圖形中的點。因此，當數據長度爲1時刪除'forceY'，圖形將正確渲染默認渲染選項由d3提供，單點可見，y軸將顯示1，空格指示0和2（某些大於1的值）。