nvd3.js-Line Chart con View Finder: rotar etiquetas de ejes y mostrar los valores de línea cuando se pasa el mouse sobre

Question

Soy nuevo en este tipo de foros y mis habilidades en inglés no son las mejores, pero intentaré hacerlo lo mejor posible:)

Hay un ejemplo de un gráfico de líneas con buscador de vistas en nvd3 website. Este es el único (ejemplos \ lineWithFocusChart.html, paquete zip nvd3) con el que he estado trabajando durante los últimos 2 días. Solo hice un cambio en el formato del ejemplo: utilizo las fechas en el eje X en lugar de los números normales.

Éstos son mis 2 preguntas:

1- ¿Cómo puedo rotar las etiquetas de todos los tics en el eje x? Mis fechas son demasiado largas (% x% X, día y hora) y quiero que giren en oder para mejorar su visualización. Solo puedo hacer girar 2 ticks (el máximo y el mínimo, los bordes, del eje x). Este es el código modifico el interior del "interruptor (axis.orient())" bloque en 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; 

Como se puede comprobar que he colocado .attr ('transformar', 'rota (45) ') como nuevo atributo, de modo que los tics máximo y mínimo se rotan (axisMaxMin). Lo he intentado de esta manera (en todo el archivo nv.d3.js) con los otros elementos de texto que creo que están asociados con los tics x pero no funciona. ¿Alguna idea? ¿Dónde tengo que poner la transformación para mostrar todas las etiquetas X giradas?

2- En el ejemplo, cuando coloca el mouse sobre la línea, no se activa ningún evento para mostrar el valor (x, y) asociado con el punto. ¿Cómo puedo mostrar esos valores? Intenté copiar y pegar los métodos utilizados en otros ejemplos donde se muestran estos valores, pero no funciona. ¿Alguna idea?

Gracias por compartir su tiempo y conocimiento: D.

Answer 1

Hubo una actualización reciente de nvd3 que hace que girar las etiquetas del eje x sea realmente fácil. Ahora hay una función del modelo de eje llamada rotateLabels (degrees) que toma un entero y rotará sus etiquetas xTick el número de grados especificado. Para girar todas las etiquetas de Xtick 45 grados hacia atrás, se puede utilizar de esta manera:

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