NVD3 Liniendiagramm X-Achse Ticks fehlen

Question

ich NVD3 bin mit Liniendiagramm angezeigt werden hier: http://jsbin.com/xodaxafiti/2/edit?js,output

Aber es scheint, wie NVD3 einige tickLabels auf XAxis Auto-verstecken, aber nur die Zecken in der Nähe der Kante, das heißt 2- 3Okt und 27-28Okt (außer dem ersten und letzten Tick). Ich weiß, dass dies eine automatische Reduzierung ist, denn wenn ich die Breite des Diagramms vergrößere, werden die Ticks angezeigt. Allerdings finde ich, dass dieses Verhalten merkwürdig ist, und das lineChart hat keine reduceXTicks-Option wie multiBarChart.

Ich möchte das Reduktionsverhalten in der Lage sein, mich zu beherrschen wie 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; 
    }) 
}) 

Aber es hat nicht funktioniert. Hat jemand eine Idee, wie man das kontrollieren kann?

Answer 1

Das Reduktionsverhalten funktioniert, weil der showMaxMin Satz standardmäßig auf true. Hinzufügen .showMaxMin(false) behebt das Problem:

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

Answer 2

Falls Sie sowohl die Grenze Zecken und die Zecken nahe der Grenze (MaxMin) Werte haben wollen, können Sie die Quelle ändern.

In dem nv.models.axis() gibt es einen Puffer gegeben, wenn für eine showMaxMin unten/oben Orientierung erfüllt ist:

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

I diese Puffer gerade entfernt:

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