D3 Moving Average

Im nuevo a D3 y tratando de hacer una media móvil de los valores anteriores y siguientes de mis datos con el fin de suavizarlo. Actualmente, tengo que trabajar con los 2 valores previos al valor actual. No funciona, pero 1) ¿Cómo Puedo utilizar los siguientes valores, y 2) lo que si quería utilizar los 15 anteriores y 15 valores siguientes (que sería una locura tener 30 individuales vars para almacenar todos ellos) Im utiliza para JavaScript tradicional pero perdieron en cuanto a cómo atravesar los datos de esta manera en D3. Espero que alguien me puede iluminar, gracias. O simplemente los datos de código de análisis aquí: Un Bandas de Bollinger de componentes para diagramas D3 en mi último artículo (en la línea de anotación componentes para gráficos D3), que crea un componente que calcula y se muestra una media móvil. Según lo prometido, Im ahora volver la atención a las Bandas de Bollinger. El componente Im que va a crear va a tener este aspecto: Como antes, Im que va a hacer trampa mediante la adopción de la carta de Toms desarrolló en su artículo sobre los componentes OHLC y candelabro. e Im crear el componente siguiente convención Mike Bostocks. ¿Cuáles son las bandas de Bollinger bueno que lo preguntas. En pocas palabras, las Bandas de Bollinger se utilizan en los gráficos financieros para indicar volatilidad de los precios. Como se puede ver en el gráfico anterior, que constan de tres componentes: Las bandas superior e inferior son algunas número de desviaciones estándar lejos de la media móvil - y tenga en cuenta que aquí se habla de una desviación estándar en movimiento. A partir de esta definición podemos ver que necesitamos dos parámetros para nuestros cálculos - el período de media móvil. para los que se utiliza típicamente un valor de 20, y el número de desviaciones estándar. que es típicamente 2. Bandas de Bollinger Componente Heres el código completo para el componente Bandas de Bollinger - Ill pasan por debajo y explicar qué se está encendiendo. Eso es una buena cantidad de código, por lo que vamos a empezar en la parte superior mirando las propiedades que he definido en este componente - el youll ver que he roto abajo en secciones por lo que no tiene un bloque monolítico de las declaraciones en la parte superior del archivo. En primer lugar tenemos la escala X e Y, que el componente necesita cuando su elaboración dónde trazar cosas. A continuación tenemos los campos que necesitamos para llevar a cabo nuestros cálculos - el campo para usar en el modelo de datos, el período promedio móvil, y el número de desviaciones estándar para su uso. Tenga en cuenta que estaban en mora el período de media móvil a 20 y el número de desviaciones estándar a 2, los valores típicos para estos campos. Por último, tenemos una serie de propiedades que definen las clases CSS para las distintas partes del componente. Esto proporciona al usuario con una gran cantidad de personalización cuando se trata de estilo, pero establecer valores predeterminados para que el usuario no tiene que especificar estas propiedades. En la función de componente creamos un d3.svg. area para representar a la zona comprendida entre las bandas superior e inferior, y tres objetos d3.svg. line para representar a la banda superior, banda inferior, y moviendo la línea media, la fijación de sus valores de x adecuadamente. Im usando el elemento de área porque eso es una muy buena manera, incorporado para mostrar la zona comprendida entre dos líneas. La mejor parte es, es realmente sencillo de utilizar - donde un elemento de línea requiere que establezca su valor Y, un elemento de área tiene dos valores de Y-- y estoy muy a favor de hacer la vida más fácil para mí. En la siguiente sección se definen dos funciones para calcular la media móvil y la desviación estándar en movimiento. Tenga en cuenta que las bandas de Bollinger usan la versión población de la fórmula desviación estándar. En el interior del bloque de selection. each es donde hacemos nuestro trabajo pesado - el establecimiento de los Y-valores de nuestros diversos elementos SVG. Declaramos una variable vacía, bollingerData. luego rellenarlo con los datos - es un mapa de la fecha de AVG (promedio móvil) y SD (desviación estándar) para cada elemento de datos. Hacemos esto una vez, que es masivamente más eficiente de lo que sería si lo hicimos todos estos cálculos sobre la marcha Por otro lado, esto significa estaban haciendo estos cálculos cada vez que el componente se vuelve a dibujar si queríamos ser máximamente eficiente caché casarse con este información, sino que también nos sería necesario para revisar que los datos divertían cambian cada vez que necesitamos para volver a dibujar, que trae sus propios problemas. El resto del bloque selection. each es largo, pero bastante simple - se acaba fijando los valores de y para nuestros elementos de áreas y líneas en base a los datos de la correlación bollingerData. Por último añadimos las areaBands. lineUpper. elementos lineLower y lineAverage SVG a la trayectoria. Tenga en cuenta que nosotros no fijamos el conjunto de la matriz de datos en estos elementos - Bandas de Bollinger normalmente enviaban muestran cuando theres no hay datos suficientes para calcular la media móvil completa, por lo que comienzan a partir índice de media móvil. que tiene el efecto deseado. Ive no se muestra los diferentes descriptores de acceso get / set porque theyre no especialmente interesantes, como el theyre más o menos lo mismo: Adición del componente de la tabla bien, esa es la poco complicado fuera del camino, por lo que ahora vamos a utilizar este nuevo componente Bandas de Bollinger. En primer lugar, crear y configurar nuestro componente: Aquí se acaba de decir el componente de la escala X e Y, y diciéndole que la utilice la propiedad de cerca el modelo de datos. Las propiedades de media móvil y standardDeviations son opcionales (sobre todo porque sólo les estaban estableciendo a sus valores por defecto, pero el youd necesidad de incluirlos si querías algo no estándar). También podríamos definir cualquiera de las cuatro propiedades CSS que expone el componente, pero he optado por omitir aquí y dejarlos con sus valores por defecto. Una vez hecho esto, se añade el componente a la carta: Pro consejo: Im poniendo este código justo en frente del código para mostrar los datos del gráfico en sí, de modo que las bandas de Bollinger estarán en el fondo y los datos de la carta estarán en el primer plano. Styling Obviamente, el último paso es el estilo de las diversas secciones del componente. Ive elegido mostrar las Bandas de Bollinger en gris, así que estoy usando un gris claro para el área entre las bandas superior e inferior y un gris más oscuro para las propias bandas (que podría en lugar de utilizar la transparencia para hacer el área más clara). Como acotación al margen, tenga en cuenta que he configurado accidente cerebrovascular-width: 0 en la zona por lo que es imposible mostrar ninguna frontera. He hecho esto por dos razones. En primer lugar, dibujaban sobre los bordes superior e inferior de todos modos, y en segundo lugar no queremos que un borde izquierdo o derecho de mostrarse - Trate de no incluir esta línea y verás a qué me refiero. Poniendo todo junto, este es el resultado: Mejoras Estoy bastante contento con este componente - que funciona muy bien y su razonablemente eficiente, mediante programación. Todavía hay algunas mejoras que podríamos hacer sin embargo. Si usted lee a través de la entrada de Wikipedia sobre las Bandas de Bollinger interminables ver que estaban usando un simple cálculo de la media móvil, pero que otros tipos de cálculo se utilizan a veces podíamos ampliar nuestro componente para permitir al usuario elegir al proporcionar una propiedad adicional como. movingAverageType ( exponencial). Conclusión En este artículo he tomado el componente de media móvil he desarrollado en mi artículo anterior y lo utilizó como base para un componente Bandas de Bollinger. El nuevo componente es muy fácil de configurar y style. In practicar la media móvil proporcionará una buena estimación de la media de la serie de tiempo si la media es constante o lentamente cambiante. En el caso de una media constante, el mayor valor de m dará los mejores estimaciones de la media subyacente. Un periodo de observación más largo tendrá un promedio de los efectos de la variabilidad. El objeto de proporcionar un m más pequeña es permitir la previsión de responder a un cambio en el proceso subyacente. Para ilustrar esto, se propone un conjunto de datos que incorpora cambios en la media subyacente de la serie temporal. La figura muestra la serie de tiempo utilizado para la ilustración, junto con la demanda media de los que se generó la serie. La media comienza como una constante en 10. A partir de tiempo 21, se incrementa en una unidad en cada período hasta que se alcanza el valor de 20 en el momento 30. Entonces se hace constante de nuevo. Los datos se simula mediante la adición a la media, un ruido aleatorio de una distribución normal con media cero y desviación estándar 3. Los resultados de la simulación se han redondeado al entero más cercano. La tabla muestra las observaciones simuladas utilizadas para el ejemplo. Cuando usamos la tabla, hay que recordar que en un momento dado, sólo se conocen los datos del pasado. Las estimaciones del parámetro del modelo, para tres valores diferentes de m se muestran junto con la media de la serie de tiempo en la siguiente figura. La figura muestra la estimación de la media móvil de la media en cada tiempo y no el pronóstico. Las previsiones cambiarían las curvas de media móvil hacia la derecha por puntos. Una conclusión es inmediatamente evidente a partir de la figura. Para las tres estimaciones de la media móvil va a la zaga de la tendencia lineal, con el retraso aumenta con m. El retraso es la distancia entre el modelo y la estimación de la dimensión de tiempo. Debido al retraso, el promedio móvil subestima las observaciones como la media va en aumento. El sesgo del estimador es la diferencia en un momento específico en el valor medio del modelo y el valor medio predicho por la media móvil. El sesgo cuando la media está aumentando es negativo. Para la media de la disminución, el sesgo es positivo. El retraso en el tiempo y el sesgo introducido en la estimación son funciones de m. Cuanto mayor sea el valor de m. cuanto mayor sea la magnitud del retardo y el sesgo. Para una serie creciente de forma continua con una tendencia. los valores de retardo y el sesgo del estimador de la media se da en las siguientes ecuaciones. Las curvas ejemplo, no se ajustan a estas ecuaciones porque el modelo de ejemplo no está aumentando de forma continua, sino que comienza como una constante, se convierte en una tendencia y luego se vuelve constante de nuevo. También las curvas de ejemplo se ven afectados por el ruido. El pronóstico promedio móvil de periodos en el futuro está representado por desplazamiento de las curvas hacia la derecha. El retardo y el sesgo aumentan proporcionalmente. Las ecuaciones a continuación indican el retardo y el sesgo de un períodos de pronóstico en el futuro si se compara con los parámetros del modelo. Una vez más, estas fórmulas son para una serie de tiempo con una tendencia lineal constante. No debemos ser sorprendidos por este resultado. El estimador de la media móvil se basa en el supuesto de una media constante, y el ejemplo tiene una tendencia lineal en la media durante una parte del período de estudio. Desde la serie en tiempo real raramente exactamente obedecer a los supuestos de cualquier modelo, debemos estar preparados para tales resultados. También podemos concluir a partir de la figura que la variabilidad del ruido tiene el efecto más grande para los pequeños m. La estimación es mucho más volátil para la media móvil de 5 de la media móvil de 20. Tenemos los deseos conflictivos para incrementar m para reducir el efecto de la variabilidad debido al ruido y lograr una reducción m para hacer el pronóstico más sensible a los cambios en la media. El error es la diferencia entre los datos reales y el valor pronosticado. Si la serie de tiempo es verdaderamente un valor constante el valor esperado del error es cero y la varianza del error se compone de un término que es una función de y un segundo término que es la varianza del ruido,. El primer término es la varianza de la media estimada con una muestra de m observaciones, asumiendo los datos proceden de una población con una media constante. Este término se minimiza haciendo m lo más grande posible. Una gran m hace que el pronóstico no responde a un cambio en la serie temporal subyacente. Para hacer la previsión sensible a los cambios, queremos m tan pequeño como sea posible (1), pero esto aumenta la varianza de error. previsión práctica requiere un valor intermedio. Pronóstico con Excel El pronóstico de complemento implementa las fórmulas de media móvil. El siguiente ejemplo muestra el análisis proporcionado por el complemento para los datos de la muestra en la columna B. Las primeras 10 observaciones están indexados -9 a 0. En comparación con la tabla anterior, los índices de época se desplazan -10. Los primeros diez observaciones proporcionan los valores de inicio para la estimación y se utilizan para calcular el promedio móvil para el periodo 0. El (10) MA columna (C) muestra los promedios móviles calculados. El parámetro m de media móvil se encuentra en la celda C3. La Fore (1) columna (D) muestra un pronóstico para un período en el futuro. El intervalo de pronóstico está en la celda D3. Cuando el intervalo de pronóstico se cambia a un mayor número de los números en la columna de la Fore se desplazan hacia abajo. La columna Err (1) (E) muestra la diferencia entre la observación y el pronóstico. Por ejemplo, la observación en el instante 1 es 6. El valor pronosticado a partir de la media móvil en el tiempo 0 es 11,1. El error es entonces -5.1. La desviación estándar y la media de la desviación media (MAD) se calculan en células E6 y E7 respectively. Calculating medio en Excel que se mueven en este breve tutorial, aprenderá cómo calcular rápidamente una media móvil simple en Excel, qué funciones utilizar para empezar a moverse promedio de los últimos N días, semanas, meses o años, y cómo agregar una línea de tendencia media móvil a un gráfico de Excel. En un par de artículos recientes, hemos dado un vistazo de cerca a calcular el promedio en Excel. Si usted ha estado siguiendo nuestro blog, que ya sabe cómo calcular un promedio normal y lo que funciona para su uso para calcular la media ponderada. En el tutorial de hoy, vamos a discutir dos técnicas básicas para el cálculo de la media móvil en Excel. Lo que se está moviendo promedio Hablando en términos generales, la media móvil (también se refirió a la media, como la rodadura. Funcionamiento normal o en movimiento media) se puede definir como una serie de medias para diferentes subconjuntos del mismo conjunto de datos. Se utiliza con frecuencia en las estadísticas, estacionalmente ajustada previsión económica y tiempo para comprender las tendencias subyacentes. En el comercio de acciones, media móvil es un indicador que muestra el valor medio de un valor en un período de tiempo determinado. En los negocios, es una práctica común para calcular una media móvil de las ventas de los últimos 3 meses para determinar la tendencia reciente. Por ejemplo, la media móvil de las temperaturas de tres meses se puede calcular tomando el promedio de las temperaturas de enero a marzo, entonces el promedio de las temperaturas de febrero a abril, a continuación, de marzo a mayo, y así sucesivamente. Existen diferentes tipos de media móvil como sencillo (también conocido como aritmética), exponencial, variable, triangular, y ponderada. En este tutorial, vamos a estar buscando en la media móvil simple más utilizada. El cálculo de la media móvil simple en Excel En general, hay dos maneras de obtener una media móvil simple en Excel - mediante el uso de fórmulas y opciones de línea de tendencia. Los siguientes ejemplos demuestran ambas técnicas. Ejemplo 1. Calcular el promedio móvil durante un cierto período de tiempo una media móvil simple se puede calcular en poco tiempo con la función PROMEDIO. Suponiendo que haya una lista de las temperaturas medias mensuales en la columna B, y quiere encontrar un promedio móvil de 3 meses (como se muestra en la imagen de arriba). Escribir una fórmula media habitual para los 3 primeros valores y de entrada que en la fila correspondiente al valor de 3º de la parte superior (celda C4 en este ejemplo), y luego copiar la fórmula hacia abajo a otras celdas de la columna: Puede fijar el columna con una referencia absoluta (como B2) si se quiere, pero asegúrese de utilizar referencias de fila relativos (sin el signo) de manera que la fórmula se ajusta adecuadamente a otras células. Recordando que en promedio se calcula mediante la suma de los valores y dividiendo la suma por el número de valores de promediarse, se puede verificar el resultado mediante el uso de la fórmula SUMA: Ejemplo 2. Obtener un promedio móvil de los últimos N días / semanas / meses / años en una columna Suponiendo que haya una lista de los datos, por ejemplo, cifras de venta o cotizaciones de bolsa, y que quieren saber el promedio de los últimos 3 meses en cualquier punto del tiempo. Para esto, se necesita una fórmula que volver a calcular la media en cuanto se introduce un valor para el siguiente mes. ¿Qué función de Excel es capaz de hacer esto El buen promedio de edad en combinación con offset y count. PROMEDIO (OFFSET (primera celda COUNT (gama completa) -. N, 0, N, 1)) donde N es el número de los últimos días / semanas / meses / años para incluir en el promedio. No estoy seguro de cómo utilizar esta fórmula de media móvil en su Excel con el siguiente ejemplo se harán las cosas más claras. Suponiendo que los valores de medias se sitúan en la columna B a partir de la fila 2, la fórmula sería la siguiente: Y ahora, vamos a tratar de entender lo que este movimiento Excel fórmula media está haciendo realidad. La función COUNT COUNT (B2: B100) cuenta cómo ya se introducen muchos valores en la columna B. empezamos a contar en B2, porque la fila 1 es la cabecera de la columna. La función OFFSET toma la celda B2 (el argumento 1 st) como punto de partida, y compensa el conteo (el valor devuelto por la función COUNT) moviendo 3 filas hacia arriba (-3 en el argumento 2º). Como resultado, se devuelve la suma de los valores en un rango que consta de 3 filas (3 en el 4º argumento) y 1 columna (1 en el último argumento), que es más de 3 meses que queremos. Por último, la suma devuelta se pasa a la función PROMEDIO para calcular la media móvil. Propina. Si está trabajando con hojas de trabajo de forma continua actualizables donde las nuevas filas son susceptibles de ser añadido en el futuro, asegúrese de proporcionar un número suficiente de filas a la función CONTAR para dar cabida a posibles nuevas entradas. No es un problema si se incluyen más filas que realmente se necesita, siempre y cuando tenga la primera celda de la derecha, la función COUNT descartará todas las filas vacías de todos modos. Como podrá darse cuenta, la tabla de este ejemplo contiene datos de sólo 12 meses, y sin embargo, el rango B2: B100 se suministra a contar, sólo para estar en el lado ahorrar :) Ejemplo 3. Obtener promedio móvil de los últimos N valores en Si una fila que desea calcular un promedio móvil de los últimos N días, meses, años, etc., en la misma fila, se puede ajustar la fórmula de compensación de esta manera: Suponiendo B2 es el primer número de la fila, y desea para incluir los últimos 3 números en la media, la fórmula toma la siguiente forma: Creación de un gráfico de Excel en movimiento promedio Si ya ha creado un gráfico para los datos, la adición de una línea de tendencia media móvil para esa tabla es una cuestión de segundos. Para ello, vamos a utilizar la función de Excel Trendline y los pasos detallados a continuación seguimos. Para este ejemplo, he creado un gráfico de columnas 2-D (Insertar grupo Gráficas Tab GT) de nuestros datos de ventas: Y ahora, queremos visualizar el promedio móvil de 3 meses. En Excel 2010 y Excel 2007, Ir a la presentación de línea de tendencia gt gt Más opciones de línea de tendencia. Propina. Si no necesita especificar los detalles tales como el intervalo o los nombres de media móvil, puede hacer clic en Diseño Gráfico gt Añadir Elemento gt gt Trendline Media Móvil para el resultado inmediato. El panel Formato de línea de tendencia se abrirá en la parte derecha de la hoja de cálculo en Excel 2013, y el correspondiente cuadro de diálogo se abrirá en Excel 2010 y 2007.To refinar su chat, puede cambiar a la línea amp Relleno o pestaña Efectos de el panel Formato de línea de tendencia y jugar con diferentes opciones como el tipo de línea, color, ancho, etc. para el análisis de datos de gran alcance, es posible que desee añadir unas líneas de tendencia de media móvil con diferentes intervalos de tiempo para ver cómo evoluciona la tendencia. La siguiente captura de pantalla muestra los 2 meses (verde) y 3 meses (ladrillo rojo) que se mueven las líneas de tendencia promedio: Bueno, eso es todo acerca de cómo calcular la media móvil en Excel. La hoja de cálculo muestra con la que se mueven las fórmulas promedio y la línea de tendencia se encuentra disponible para su descarga - Mover hoja de cálculo de promedio. Les agradezco por leer y espero ver que la próxima semana Usted también podría estar interesado en: Crear un gráfico de las finanzas de Yahoo con D3 y d3fc mayoría de las bibliotecas de gráficos son monolitos. Las más características que soportan, los más difíciles de manejar sus API tienden a ser. Con el proyecto d3fc hemos estado explorando un enfoque alternativo, elaboración de gráficos a partir de un conjunto de componentes pequeños, utilizando la biblioteca D3. En este post quiero demostrar el poder de ambos d3fc y D3 mediante la restauración de la carta bastante complejo Yahoo Finanzas. La creación de una recreación de píxel perfecto de esta carta con cualquier biblioteca de gráficos monolítica sería un reto importante (si no imposible). Con d3fc es sorprendentemente simple Este post tiene un enfoque paso a paso para demostrar cómo el gráfico de las finanzas de Yahoo se puede recrear fielmente. El procesamiento de una sencilla d3fc gráfico y su dependencia están disponibles a través de la NGP como se detalla en las instrucciones de instalación. d3fc crea gráficos utilizando SVG, por lo que el primer paso es añadir un elemento SVG a la página: Los datos de las finanzas de Yahoo está disponible como datos CSV a través de una API no compatible, sin embargo, ampliamente utilizado. D3 tiene una serie de funciones de utilidad para ir a buscar y analizar los datos, incluyendo CSV. El siguiente código realiza una solicitud a través de XHR d3.csv: Una vez que los datos han sido extraídas y analizada, la siguiente función renderChart se llama: En cuanto a este código en detalle, el primer paso construye un fc. chart. linearTimeSeries. Este es un componente d3fc relativamente alto nivel que hace un gráfico con un eje de fecha horizontales y un eje numérico vertical. Su principal responsabilidad es la de construir un diseño de SVG que alberga las diversas partes de la gráfica (ejes, área de trazado, etc.). La función de utilidad fc. util. extent se utiliza para calcular la extensión (valores máximo y mínimo) de diversas propiedades de los datos. A continuación una serie de área d3fc se construye, donde la propiedad de acceso yValue se utiliza para seleccionar el valor de cada punto de datos abierta. El descriptor de acceso Valorx por defecto para la mayoría de los componentes espera una propiedad de fecha, que es el caso en este ejemplo. El PlotArea gráficos se establece en el componente de serie de área, asegurándose de que la serie de zona tiene las escalas correctas se le aplican. Por último, el elemento SVG se selecciona mediante d3.select. Los datos que se une, y el componente gráfico de un llamado a la selección. Si usted ha tenido alguna experiencia ya con D3, este patrón de construcción debe ser muy familiar para usted. Los componentes d3fc siguen el patrón de componentes D3. El código simple por encima de los resultados en la siguiente tabla: Adición de líneas de división y la línea Donde otras bibliotecas de gráficos podrían representar líneas, puntos y el área como un solo tipo serie, d3fc prefiere un enfoque de componentes micro, donde cada uno es independiente. Para esta estadística se requieren una serie de área y la línea: líneas de división son otro componente d3fc: El área de trazado del gráfico sólo acepta una única serie, sin embargo varias instancias de la serie (que tienen escalas X e Y) pueden ser agrupados juntos usando un multi-serie: La multi-serie crea un elemento g que contiene para cada uno de la serie suministrada, establece sus x y escalas y y propaga los datos a cada uno. Con las líneas de división, área y línea de la serie añaden, y algunos ajustes menores en el número de garrapatas, la tabla tiene el siguiente aspecto: componentes Styling d3fc son de estilo a través de CSS. La forma más fácil de determinar los selectores CSS adecuados para estilizar un componente es tan sólo mirar a la salida procesada. El gráfico de Yahoo tiene un gradiente sutil que se aplica a la serie de zona. gradientes SVG son (torpemente) definidos en SVG de la siguiente manera: Observe que el componente llamando linearTimeSeries en el SVG anterior no destruye el elemento defs. d3fc componentes están escritos de tal manera que se identifican a través de sus propios elementos de tipo CSS, lo que permite que estos elementos conviven con otros dentro del mismo contenedor. Con algunos simples CSS los estilos de gradiente y de línea se pueden aplicar a la carta. Por desgracia, no es posible volver a colocar las etiquetas del eje D3 a través de CSS. La única manera de lograr esto es hacer que el eje a continuación, utilizar una selección D3 para localizar las etiquetas luego pasar directamente: Esto no es ideal, ya que el código anterior se ejecuta cada vez que las tablas se representa, independientemente de si los ejes requieren actualizaciones . Con este estilo en su lugar la tabla tiene el siguiente aspecto: Adición de un d3fc media móvil tiene una serie de indicadores financieros, estos algoritmos se aplican directamente a los datos de la carta, con la implementación por defecto añadiendo nuevas propiedades a los datos (esto puede ser modificado por el suministro de una función de combinación personalizada). A continuación se calcula una media móvil exponencial (EMA) en base al precio de cierre: A fin de que un indicador, se requiere un procesador adecuado. Un EMA calcula un valor único para cada punto de datos, y se hace a través de una serie de línea regular, pero para los indicadores más complejos (MACD, Bollinger) suministros d3fc dedicado extracción de grasas. El código anterior muestra el patrón de decorar la que se pueden encontrar en la mayoría de los componentes d3fc. Decorar se pasa una selección que se crea como resultado de los componentes se unen de datos. Si usted no está familiarizado con este concepto, identificación recomienda Mikes Pensando con juntas artículo. En el código anterior, la selección suministrada a decorar es la selección de actualización para el elemento g componentes de la raíz. La selección ingresar se utiliza para agregar una clase ema a este elemento. Nota, que mediante el uso de la selección entrar, esto sólo se realiza una vez, en el punto del elemento se construye inicialmente. NOTA: Esta selección ingresar no es exactamente la misma que la que se obtiene a través de un conjunto de datos estándar se unen, en este caso la selección ya se ha anexado un elemento entrar. Usted verá que decoran ser utilizado en un buen número de lugares en este ejemplo, es un modelo potente y versátil. Con la serie EMA añade a la multi-serie del gráfico se ve como la siguiente: Adición de un gráfico de volumen La tabla de finanzas de Yahoo muestra el volumen operado en la mitad inferior del área de trazado, se trata de un diseño de gráficos financiera bastante estándar. Con el fin de hacer que el gráfico de volumen, y se requiere una escala secundaria, con el dominio basado en el volumen datas más, y el rango establecido en la mitad de la altura del área de trazado. Los linearTimeSeries imposible tener una escala de volumen como parte de su trazado, esto es algo que se tiene que añadir manualmente. Los linearTimeSeries utiliza el componente de diseño d3fc, que implementó el diseño Flexbox, así que tiene sentido utilizar esto para crear un contenedor para la serie de volumen también. El siguiente crea un elemento g que actúa como un contenedor para la serie de volumen: En lugar de anexar un elemento g directamente en el recipiente, se añade dentro de un conjunto de datos se unen a entrar en la selección. Esto asegura que sólo se añade un único elemento, independientemente de cuántas veces se llama la función renderChart. El ejemplo anterior es un diseño relativamente simple, para un ejemplo más complejo pop a la página web d3fc. Una escala de volumen se construye con un dominio basado en los datos de entrada y un rango basado en la altura del recipiente de volumen: Por último, una serie de volumen se construye y se rindió: Esto se traduce en la siguiente tabla: Colorante el volumen bares El paso final en este ejemplo es colorear cada barra del gráfico del volumen en función de si el precio ha subido o bajado dentro del período de tiempo representado por la barra dado. Una vez más se emplea decorar: Si nos fijamos en los elementos SVG construidos para una serie de barras se encuentra que cada barra se construye a partir de un elemento g que contiene un único camino. La función de decorar anterior utiliza la selección entrar, que contiene estos elementos g, selecciona la ruta anidada y se aplica un color de trazo adecuado basado en la dirección de movimiento de los precios. El cuadro ahora está empezando a parecer bastante como el gráfico de las finanzas de Yahoo: Conclusiones En esta entrada del blog que usted ha visto cómo los componentes d3fc se pueden ensamblar, configurar y decorados para recrear un cuadro financiero relativamente complejo, aunque no se ha completado todavía. En mi próximo post Demostración enferma componentes de la leyenda y punto de mira cómo d3fc se pueden añadir para proporcionar cierto grado de interactividad, y cómo crear un proveedor de discontinuidad encargo Hasta entonces, si usted tiene alguna pregunta sobre d3fc o este ejemplo, estar en contacto, ya sea a través del campo de comentarios a continuación, o mediante el proyecto de GitHub. Saludos, Colin E. Soy director de tecnología de Scott Lógica y soy un prolífico autor técnico, blogger y el altavoz en una gama de tecnologías. Durante varios años trabajé con la pila de Microsoft de tecnologías, entre WPF, WCF, Silverlight y Windows Phone. Más recientemente he diversificado para incluir HTML5, JavaScript y el desarrollo de iOS.