Empêchez Rickshaw/D3 d'afficher les étiquettes des axes x au-dessus d'un niveau de zoom donné

Question

Je suis nouveau sur JS/D3 et Rickshaw. J'essaie de modifier le example plot pour répondre à mes besoins.

Mon axe x est une séquence d'ADN, c'est-à-dire une combinaison des lettres ACTG. J'ai cette séquence à utiliser comme étiquettes de l'axe x par l'analyse dans un tableau, puis en utilisant

var xAxis = new Rickshaw.Graph.Axis.X({ 
    graph: graph, 
    tickFormat: function(x) { 
     return dna[x] 
    } 
}); 

Mon problème est maintenant que lors d'un zoom sur la parcelle, Rickshaw par défaut sélectionne des lettres au hasard dans ma séquence pour afficher comme étiquettes d'axe x. Cela a du sens pour un axe x numérique, mais pas dans mon cas.

J'ai besoin de changer le comportement de Rickshaw.Graph.Axis.X pour afficher uniquement les étiquettes d'axe x lorsque le niveau de zoom est suffisamment élevé. Je comprends que j'ai besoin de trouver en quelque sorte le niveau de zoom et de définir les étiquettes d'axe à une chaîne vide si elle est trop faible. Je ne sais toujours pas par où commencer, même après avoir lu la question très similaire here.

Answer 1

J'ai trouvé une solution simple: J'ai implémenté un formateur pour les étiquettes xaxis qui vérifie la plage de xaxis et renvoie des étiquettes vides si elle est trop grande.

var ticksTreatment = 'glow'; 
var pixelsPerTick = 10 
xAxis = new Rickshaw.Graph.Axis.X({ 
    graph: graph, 
    ticksTreatment: ticksTreatment, 
    pixelsPerTick: pixelsPerTick, 
    tickFormat: function(x) { 
     var maxdist = 900/pixelsPerTick // width/pixelpertick 
     var xvalues = graph.stackedData[0] // first line, but they all share the same x 
     var xmin = xvalues[0].x 
     var xmax = xvalues[xvalues.length-1].x 
     var dist = xmax-xmin 

     if (dist < maxdist) { 
      return dna[x] 
      } 
     else {return ""} 

    } 
});