nvd3 grafiğinde az sayıda tarih bulunduğumda onay işaretlerini nasıl tekrar tutabilirim

Question

X ekseni, sınırlı sayıda tarih olduğunda tarihleri ​​tekrarlamayı sever. Bu keman bakın: Ekran genişliğinde

http://jsfiddle.net/skilesare/bFfJ2/1/

nv.addGraph(function() { 

    var data = fakeActivityByDate(); 

    var chart = nv.models.lineChart(); 




chart.xAxis 
     .axisLabel('Date') 
     .rotateLabels(-45) 
     .tickFormat(function(d) { return d3.time.format('%b %d')(new Date(d)); }); 

    chart.yAxis 
     .axisLabel('Activity') 
     .tickFormat(d3.format('d')); 

    d3.select('#chart svg') 
     .datum(data) 
    .transition().duration(500) 
     .call(chart); 

    nv.utils.windowResize(function() { d3.select('#chart svg').call(chart) }); 

    return chart; 
}); 

function days(num) { 
    return num*60*60*1000*24 
} 
/************************************** 
    * Simple test data generator 
    */ 

function fakeActivityByDate() { 
    var lineData = []; 
    var y=0; 
    var start_date = new Date() - days(365); // one year ago 

    for (var i = 0; i < 4; i++) { 
    lineData.push({x: new Date(start_date + days(i)), y: y}); 
    y=y+Math.floor((Math.random()*10)-3); 
    } 

    return [ 
    { 
     values: lineData, 
     key: 'Activity', 
     color: '#ff7f0e' 
    } 
    ]; 
}` 

Eğer yeterince tekrarlanan tarihleri ​​göreceksiniz. Pencereyi süzüyorsanız, sorun gider.

Answer 1

Sorun, bu gibi durumlarda da görünebileceğinden, ekran boyutuna bağlı değildir: Görüntülemek için sadece 3 gününüz var ve 3 veya daha fazla sayı elde edeceğinizde 3 veya 6 ya da daha doğrusu olsun (aslında tam size göre) jsfiddle'ına bakarsam tekrar görüşürüz. Nvd3 (axis.js bakmak) kene boyutlarını ayarlamak için böyle bir şey kullanır doğrudur: ya

• size:

  if (ticks !== null) 
      axis.ticks(ticks); 
  else if (axis.orient() == 'top' || axis.orient() == 'bottom') 
      axis.ticks(Math.abs(scale.range()[1] - scale.range()[0])/100); 
  

  Bu sorunun birkaç çözümü vardır nvd3 en eksen kendi ekseni bileşeni uygulamak ve değiştirme

• ya doğrudan nvd3 en eksen bileşeni değiştirmek ve sonra bu senaryo sizeiçin özel olarak kullanılacak bazı ayarları ekleyinaçıklıyor (nvd3'ün yüksek olduğu gibi özelleştirilebilir olduğunu fark edeceksiniz).

• Hack: İlk tarihi, son tarih ve hesaplanan aradaki birkaç tarihleri: Eğer ekranda (örnek üzerinde olmasını istediğiniz D3 en kendi tickValues ​​() kullanmak ve ona tarihleri ​​ile bir dizi geçirilecek Algoritmanınız). D3'ün belgelerine bakın: https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickValues. Davaya bağlı olarak (hangi ekseni değiştirmek istediğinizi ve hangi tabloyu) sadece size kodu yapıştırmam gerekmiyor ve grafik bileşenine tickValues ​​(örneğin lineChart) ayarlamak için algoritmanızı eklemeniz gerekmiyor. tickValues ​​için bir ayarlayıcı ve değerleri değerlerinizle üzerine yaz.

Answer 2

Geç yanıt, ancak başkalarına yararlı olabilir. Ben zaten uygulanmış keneler & d3'ün çok formatlı belirteci bir dizi koruyarak, yinelenen keneler ortadan kaldırmak için bir geçici çözüm kullanın.

uniqueTicks = []; 
    xTickFormat = d3.time.format.multi([ 
             ["%Y", function (d) { 
             // If tick not applied yet            
             if (uniqueTicks.indexOf(d.getFullYear()) === -1) { 
               uniqueTicks.push(d.getFullYear()); 
               return true; 
              } else { 
               return false; 
              }           
             }], 
             ["", function() { 
              return true; 
             }] 
            ]); 

    d3.svg.axis().tickFormat(xTickFormat); 

Bu numara başka türde bir onay biçimi için düzeltilebilir.