NVD3折線圖X軸蜱缺少

我使用NVD3顯示此線圖：http://jsbin.com/xodaxafiti/2/edit?js,output NVD3折線圖X軸蜱缺少

但好像NVD3自動隱藏於x軸的一些tickLabels，但只有靠近邊緣的蜱，即2- 3Oct和27-28Oct（除了第一個和最後一個勾號）。我知道這是一個自動縮小，因爲當我增加圖表的寬度時，滴答開始顯示。但是我發現這種減少行爲很奇怪，而lineChart沒有像multiBarChart這樣的reduceXTicks選項。

我希望能夠控制減少自己的行爲像this：

var chart = nv.models.lineChart()  
    .useInteractiveGuideline(true) 
    .margin({left: 80,top: 20,bottom: 120,right: 20}); 

chart.xAxis.ticks(function() { 
    return data[0].map(chart.x()).filter(function(d,i) { 
     i % Math.ceil(data[0].values.length/(availableWidth/100)) === 0; 
    }) 
})

但沒有奏效。任何人有任何想法如何控制這個？

missing tickLabels

來源

2014-10-29 yonasstephen

使用'.tickValues（）'而不是'.ticks（）'。 – 2014-10-29 09:53:42

我已經嘗試過使用'.tickFormat（）'，但它給了我上面缺少tickLabels的過濾器。另外，使用這個技巧時，隱藏的標籤甚至不會顯示在工具提示中。我相信'tickValues（）'會有相同的結果。 – yonasstephen 2014-10-29 13:24:32

嗯，我會使用x軸的時間尺度 - 這應該可以讓您更好地控制所顯示的內容。 [這個問題]（http://stackoverflow.com/questions/14058876/how-do-i-display-dates-on-the-x-axis-for-nvd3-d3-js）應該是有幫助的。 – 2014-10-29 13:41:15

還原行爲有效，因爲showMaxMin設置爲默認值爲TRUE。添加.showMaxMin(false)解決了這個問題：

chart.xAxis.axisLabel("XAxisLabel") 
    .showMaxMin(false)  
    .tickValues(tickvalues)   
    .tickFormat(function (d) { 
     return tickformat[d]; 
     }) 
;

enter image description here

來源

2014-10-30 10:02:40

謝謝，男人！ – yonasstephen 2014-10-30 12:41:04

minMax救了我！ – bravokeyl 2015-11-17 13:54:37

注意你沒有超出範圍的tickvalues，或者他們會出現在yaxis的左邊。你也可以使用'xDomain'來設置xAxis的範圍 – 2016-12-22 08:15:25

如果你想有兩個靠近邊界的邊界蜱和蜱（最大最小）值，你可以修改源。

在nv.models.axis（），有當showMaxMin是真正的底/頂部取向給出一個緩衝：

if (showMaxMin && (axis.orient() === 'top' || axis.orient() === 'bottom')) { 
      var maxMinRange = []; 
      wrap.selectAll('g.nv-axisMaxMin') 
       .each(function(d,i) { 
        try { 
         if (i) // i== 1, max position 
          maxMinRange.push(scale(d) - this.getBoundingClientRect().width - 4); //assuming the max and min labels are as wide as the next tick (with an extra 4 pixels just in case) 
         else // i==0, min position 
          maxMinRange.push(scale(d) + this.getBoundingClientRect().width + 4) 
        }catch (err) { 
         if (i) // i== 1, max position 
          maxMinRange.push(scale(d) - 4); //assuming the max and min labels are as wide as the next tick (with an extra 4 pixels just in case) 
         else // i==0, min position 
          maxMinRange.push(scale(d) + 4); 
        } 
       }); 
      // the g's wrapping each tick 
      g.selectAll('g').each(function(d, i) { 
       if (scale(d) < maxMinRange[0] || scale(d) > maxMinRange[1]) { 
        if (d > 1e-10 || d < -1e-10) // accounts for minor floating point errors... though could be problematic if the scale is EXTREMELY SMALL 
         d3.select(this).remove(); 
        else 
         d3.select(this).select('text').remove(); // Don't remove the ZERO line!! 
       } 
      }); 
}

我只是刪除這些緩衝區：

try { 
     if (i) // i== 1, max position 
      maxMinRange.push(scale(d)); 
     else // i==0, min position 
      maxMinRange.push(scale(d)) 
}catch (err) { 
     if (i) // i== 1, max position 
       maxMinRange.push(scale(d)); 
     else // i==0, min position 
       maxMinRange.push(scale(d)); 
}

來源

2015-07-22 18:46:15 arjun010

NVD3折線圖X軸蜱缺少

回答

相關問題