Etiquetado de gráficos de líneas animados con D3

Soy nuevo en D3 y me encontré con un problema que parece que no puedo resolver.

He construido un gráfico de líneas animadas usando este tutorial, y ahora estoy tratando de agregarle. Lo que pensé que sería una buena idea sería etiquetar cada línea en el gráfico lineal, pero etiquetarla al final de la línea.

Esto es lo que he encontrado hasta ahora:

enter image description here

Como puede ver, es subóptimo en el mejor de los casos. Estoy colocando el texto incorrectamente, pero lo que no es obvio es cómo colocarlo de la manera correcta. Aquí está el código en cuestión.

name.transition()
    .duration(duration)
    .ease("linear")
    .attr("transform", function(d) { 
      return "translate(" + (width - margin.left - margin.right) +", " + y(d[n-2]) + ")";
    });

Parece que la aceleración "lineal" está desactivada, y también parece estar usando una escala diferente a veces.

¿Hay algún experto en D3 (o novato) dispuesto a enseñarme la forma correcta de hacerlo?

preguntado el 07 de marzo de 13 a las 22:03

1 Respuestas

Parece haber dos problemas aquí:

  1. .interpolate("basis") - está utilizando una interpolación lineal para el título, pero una interpolación B-spline para la ruta. Comentar esta línea mantiene el título bastante ajustado con su línea de datos (aunque también suaviza la línea, probablemente sea algo bueno para la mayoría de los gráficos de datos).

  2. "Salta" cuando cambia la escala del eje. Esto se debe a que el título está en transición a la nueva posición en la nueva escala, pero su posición de inicio todavía está establecida en relación con la escala anterior, por lo que puede comenzar por encima o por debajo de la línea que está rastreando. Creo que puedes arreglar esto agregando un directo .attr configuración antes de comenzar la transición, para fijar la posición inicial del título:

    name
    .attr("transform", function(d) {
       return "translate(" +
           (width - margin.left - margin.right) +", " + y(d[n-2]) + ")"
    })
    .transition()
    // etc

Vea http://jsbin.com/uvayof/2

respondido 08 mar '13, 00:03

Esto es realmente genial. Es una lástima que se deshaga del B-Spline. ¿Crees que hay alguna forma de mantener eso y luego usar un tipo diferente de interpolación para el título? - eric koslow

No estoy seguro, pero creo que esto sería difícil. Las opciones de aceleración se muestran aquí: Easings.net - es posible que lo haga mejor con el valor cúbico predeterminado de entrada y salida, pero dudo que siga la línea exactamente. - rabinowitz

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.