NVD3 Line Chart X Ось тики Отсутствующие

Question

Я использую NVD3 для отображения строки диаграммы здесь: http://jsbin.com/xodaxafiti/2/edit?js,output

Но похоже NVD3 автоматически скрыть некоторые tickLabels на XAxis, но только те тики вблизи края, то есть 2- 3Oct и 27-28Oct (кроме первого и последнего тика). Я знаю, что это автоматическое сокращение, потому что, когда я увеличиваю ширину диаграммы, тики начинают проявляться. Однако я нахожу, что это уменьшающее поведение странно, и у lineChart нет опции reduceXTicks, например multiBarChart.

Я хочу, чтобы иметь возможность контролировать восстанавливающего поведение на себя как 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; 
    }) 
}) 

Но это не сработало. Кто-нибудь знает, как это контролировать?

Answer 1

Восстанавливающий поведение работает потому, что showMaxMin значение ИСТИНА по умолчанию. Добавление .showMaxMin(false) исправляет проблему:

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

Answer 2

В случае, если вы хотите, чтобы обе граничные клещей и клещей, близких к границе (MAXMIN) значения, вы можете изменить источник.

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