2012-07-18 12 views
7

Sono nuovo in questo tipo di forum e le mie capacità di inglese non sono le migliori ma cercherò di fare del mio meglio:).Nvd3.js-Grafico a linee con View Finder: ruota le etichette degli assi e mostra i valori delle linee con il mouse su

C'è un esempio di grafico a linee con View Finder su nvd3 website. Questo è quello (esempi \ lineWithFocusChart.html, pacchetto zip nvd3) con cui ho lavorato negli ultimi 2 giorni. Ho apportato solo una modifica al formato dell'esempio: utilizzo le date sull'asse X anziché sui numeri normali.

Qui ci sono i miei 2 domande:

1- Come posso ruotare le etichette tutte le zecche nel asse x? Le mie date sono troppo lunghe (% x% X, giorno e ora) e le voglio ruotate per migliorarne la visualizzazione. Posso ottenere solo 2 tick ruotati (il massimo e il minimo, i bordi, dell'asse x). Questo è il codice modifico all'interno del "switch (axis.orient())" blocco alla nv.d3.js:

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; 

Come è possibile controllare ho messo .attr ('trasformare', 'ruotare (45) ') come nuovo attributo in modo da ruotare i ticks massima e minima (axisMaxMin). Ho provato in questo modo (in tutto il file nv.d3.js) con gli altri elementi di testo che penso siano associati ai ticks x, ma non funziona. Qualche idea? Dove devo mettere la trasformazione per mostrare tutte le etichette X ruotate?

2- Nell'esempio, quando si posiziona il mouse sulla linea, nessun evento viene attivato per mostrare il valore (x, y) associato al punto. Come posso mostrare quei valori? Ho provato a copiare e incollare i metodi usati in altri esempi dove questi valori sono mostrati ma non funziona. Qualche idea?

Grazie per aver condiviso il tuo tempo e le tue conoscenze: D.

risposta

29

C'è stato un recente aggiornamento di nvd3 che rende davvero semplice la rotazione delle etichette di graduazione dell'asse x. Esiste ora una funzione del modello di asse chiamata rotateLabels (gradi) che prende un numero intero e ruoterà le etichette xTick del numero specificato di gradi. Per ruotare tutte Xtick etichette 45 gradi indietro, si potrebbe usare in questo modo:

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

Nota: questo non sembra funzionare se si sta utilizzando anche: .staggerLabels (true) – DuffJ

+3

Questo funziona per me ora per ruotare le etichette Angular NVD3: xAxis: { rotateLabels: -45 }, – davedonohue

Problemi correlati