NVD3 Çizgi Grafik X Ekseni Keneler ben NVD3 burada çizgi grafiği görüntülemek için kullanıyorum

Question

Eksik 3Oct ve 27-28Oct (ilk ve son işaret hariç). Bunun otomatik küçültme olduğunu biliyorum çünkü grafiğin genişliğini artırdığımda keneler ortaya çıkıyor. Ancak, bu azaltma davranışının tuhaf olduğunu ve lineChart'ın multiBarChart gibi XTick'leri azaltmadığını buldum.

Ben this gibi indirgeyici Davranışı kendimi kontrol edebilmek istiyorum:

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; 
    }) 
}) 

Ama işe yaramadı. Bunun nasıl kontrol edileceği hakkında bir fikri olan var mı?

Answer 1

azaltıcı davranış çalışır varsayılan olarak true showMaxMin sette çünkü. .showMaxMin(false) düzeltmeleri sorunu Ekleme: durumunda

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

Answer 2

Eğer sınırına yakın sınır kene ve kene hem istiyorum (Maksimin) değerleri, sen kaynağını değiştirebilirsiniz. Sadece, bu tampon çıkarılır

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)); 
}