nvd3.js-Liniendiagramm mit Viewfinder: Achsenbeschriftungen drehen und Linienwerte anzeigen, wenn Maus über

Question

Ich bin neu in dieser Art von Forum und meine Englischkenntnisse sind nicht die besten, aber ich werde versuchen, mein Bestes zu geben:).

Es gibt ein Beispiel für ein Liniendiagramm mit View Finder unter nvd3 website. Dies ist die eine (examples \ lineWithFocusChart.html, nvd3 zip-Paket) mit der ich in den letzten 2 Tagen gearbeitet habe. Ich habe nur eine Änderung am Format des Beispiels vorgenommen: Ich verwende Daten in der X-Achse anstelle von normalen Zahlen.

Hier sind meine 2 Fragen:

1- Wie kann ich alle drehen sich die Etiketten Zecken in der x-Achse? Meine Daten sind zu lang (% x% X, Tag und Uhrzeit) und ich möchte, dass sie gedreht werden, um ihre Anzeige zu verbessern. Ich kann nur 2 Ticks rotieren lassen (die Max und Min, die Kanten der X-Achse). Dies ist der Code, den ich in der "Schalter (axis.orient())" Block bei nv.d3.js ändern:

case 'bottom': 
     axisLabel.enter().append('text').attr('class', 'axislabel') 
      .attr('text-anchor', 'middle') 
      .attr('y', 25); 
     axisLabel 
      .attr('x', scale.range()[1]/2); 
     if (showMaxMin) { 
     var axisMaxMin = wrap.selectAll('g.axisMaxMin') 
         .data(scale.domain()); 
     axisMaxMin.enter().append('g').attr('class', 'axisMaxMin').append('text'); 
     axisMaxMin.exit().remove(); 
     axisMaxMin 
      .attr('transform', function(d,i) { 
       return 'translate(' + scale(d) + ',0)' 
      }) 
      .select('text') 

      .attr('dy', '.71em') 
      .attr('y', axis.tickPadding()) 
      .attr('text-anchor', 'middle') 
      .text(function(d,i) { 
       return ('' + axis.tickFormat()(d)).match('NaN') ? '' : axis.tickFormat()(d) 
      }) 
      .attr('transform', 'rotate(45)') 
      ; 
     d3.transition(axisMaxMin) 
      .attr('transform', function(d,i) { 
       return 'translate(' + scale.range()[i] + ',0)' 
      }); 
     } 
     break; 

Wie Sie i gesetzt haben überprüfen .attr ('transformieren', ‚drehen (45) ') als neues Attribut, so dass die Max- und Min-Ticks rotiert werden (axisMaxMin). Ich habe diesen Weg (in der gesamten Datei nv.d3.js) mit den anderen Textelementen versucht, von denen ich glaube, dass sie den x-Ticks zugeordnet sind, aber es funktioniert nicht. Irgendeine Idee? Wo muss ich die Transformation setzen, um alle X-Labels gedreht darzustellen?

2- Im Beispiel, wenn Sie die Maus über die Linie bewegen, wird kein Ereignis ausgelöst, um den Wert (x, y) anzuzeigen, der dem Punkt zugeordnet ist. Wie kann ich diese Werte zeigen? Ich habe versucht, die Methoden zu kopieren, die in anderen Beispielen verwendet wurden, in denen diese Werte angezeigt werden, aber es funktioniert nicht. Irgendeine Idee?

Vielen Dank für Ihre Zeit und Ihr Wissen: D.

Answer 1

Es gab ein aktuelles Update für nvd3, das das schnelle Drehen der X-Achsen-Ticks erleichtert. Es gibt jetzt eine Funktion des Achsenmodells mit dem Namen rotateLabels (Grad), die eine Ganzzahl annimmt und Ihre xTick-Beschriftungen um die angegebene Gradzahl rotiert. So drehen Sie alle Xtick Etiketten 45 Grad zurück, können Sie es wie folgt verwenden:

var chart = nv.models.lineChart(); 
chart.xAxis.rotateLabels(-45);