javascript - una - ¿Gráfico de serie temporal Zoomable, Google-Finance-style en D3 o Rickshaw?
series temporales ciclicas (9)
¡Rickshaw ahora es compatible con esto!
Ver example y Rickshaw.Graph.RangeSlider.Preview .
Quiero crear un gráfico de líneas de serie temporal en D3, con una versión más pequeña del gráfico a continuación que permite al usuario ampliar algunas secciones del gráfico, como un gráfico de Google Finance .
El ejemplo más cercano que he encontrado es este gráfico de swimlane:
¿Alguien tiene algún ejemplo de hacer esto con un gráfico de líneas en D3?
NB: Definitivamente quiero una versión pequeña del gráfico con un pincel redimensionable en la parte superior, no un eje x puramente arrastrable / con zoom, como en este ejemplo .
Idealmente, me gustaría usar Rickshaw , pero los ejemplos de Rickshaw solo parecen tener un control deslizante de rango . Entonces, un ejemplo de Rickshaw sería aún mejor.
¿Has visto Crossfilter ? Otra oferta basada en D3, que tiene propiedades similares a la interfaz de Google Finance.
¿Qué hay de HighStock , HighCharts hermano menos conocido?
Dygraphs hace exactamente lo que quiere en esta demostración:
Entonces, la mejor respuesta que he encontrado es el archivo /examples/zoom/zoom.html en el repositorio D3 . No es un gráfico de líneas, pero es fácil de adaptar.
No estoy familiarizado con ninguno de los marcos que mencionas, pero me pregunto si era una opción para ti utilizar los gráficos de Google . Al usar esto, usted podría hacer lo que hacen en google finance y el ejemplo de cómo hacerlo podría tomarse de su sitio web.
Si está buscando otros marcos para estudiar, puedo recomendar Emprise Charts. Estoy bastante seguro de que podría hacer algo similar allí y su equipo de desarrollo es muy útil.
Probablemente llegue un poco tarde a la fiesta, pero el Sr. Bostock ha proporcionado recientemente example de lo que está buscando.
Sé que tienes la intención de usar D3, pero Humble Finance merece ser mencionado ya que hace exactamente lo que quieres con solo javascript y lienzos.
Si realmente quieres utilizar D3, supongo que tendrás que crear algo propio que debe ser una pérdida de tiempo, dado lo bueno y adecuado que es el financiamiento humilde.
Consejo para probar Humble Finance: la descarga zip no incluye flotr2, pero puede descargarse fácilmente desde here (obviamente, debe agregar los archivos requeridos de flotr2 al directorio de Humble Finance en el lugar correcto).
Editar:
Ignore a Humble Finance, traté de usarlo mucho y me llevó a la vuelta de la esquina. La base del código parecía bastante desordenada y tuviste que agregar muchas bibliotecas a tu página para que funcione, por lo que es muy difícil realizar modificaciones menores en el gráfico. Ahora uso D3, pero descubrí que SVG se procesó muy lentamente con muchos puntos de la curva. Terminé usando D3 para dibujar los ejes, configurar las escalas y representar el cambio de marco de tiempo, y dibujar la curva con un lienzo. Eso parece funcionar bastante bien. Lo siento, no tengo el ejemplo en cualquier lugar visible.
NVD3 es un proyecto muy bueno que tiene una serie de cuadros reutilizables escritos en D3. Vea here un ejemplo de un gráfico de líneas con un buscador de vistas, junto con el código fuente.
Actualización: El ejemplo de NVD3 ahora también enlaza con un example de Mike Bostock (creador de D3) que demuestra una funcionalidad similar, la capacidad de acercar / enfocar una selección de los datos, implementada puramente con D3.js.