D3 Bewegende Gemiddelde

Im nuut D3 en probeer om 'n bewegende gemiddelde van die vorige en volgende waardes op my data te doen ten einde dit uit te stryk. Op die oomblik het ek dit werk met behulp van die 2 vorige waardes die huidige waarde. Dit werk nie, maar 1) hoe sou ek ook die volgende waardes gebruik, en 2) wat as ek wou die 15 vorige en 15 volgende waardes gebruik (dit sou gek tot 30 individuele hê Vars vir die berging van almal van hulle) Im gebruik om tradisionele JavaScript maar verloor oor hoe om die data op hierdie manier in D3 deurkruis. Hoop iemand kan my verlig, te danke. Of is dit net die data ontleding van kode hier: A Bollinger Bands komponent vir D3 kaarte in my laaste artikel (on line body komponente vir D3 kaarte), ek het 'n komponent wat bereken en vertoon 'n bewegende gemiddelde. Soos belowe, Im nou draai my aandag aan Bollinger Bands. Die komponent Im gaan skep gaan lyk: Soos voorheen, Im gaan om te kul deur die neem van die grafiek Toms ontwikkel in sy artikel oor OHLC en kandelaar komponente. en Im die skep van die komponent volgende Mike Bostocks konvensie. Wat is Bollinger Bands Bly jy gevra. In 'n neutedop, is Bollinger Bands wat op finansiële kaarte te prysvolatiliteit dui. Soos jy kan sien uit die grafiek hierbo, hulle bestaan ​​uit drie komponente: die boonste en onderste bande is 'n paar aantal standaardafwykings weg van die bewegende gemiddelde - en daarop te let dat hier praat oor 'n bewegende standaardafwyking. Uit hierdie definisie kan ons sien dat ons twee parameters vir ons berekeninge nodig - die bewegende gemiddelde tydperk. waarvoor 'n waarde van 20 is tipies gebruik word, en die aantal standaardafwykings. wat is tipies 2. Bollinger Bands komponent Heres die volledige kode vir die Bollinger Bands komponent - Siek gaan deur dit hieronder en verduidelik wat aangaan. Dis 'n goeie bedrag van die kode, so kan begin aan die bokant deur te kyk na die eienskappe Ive gedefinieer op hierdie komponent - sal jy sien dat Ive gebreek hulle neer in afdelings sodat ons het nie 'n monolitiese blok van verklarings aan die bokant van die lêer. Eerste het ons die X en Y skale, wat die komponent moet as die uitwerk waar om dinge te trek. Volgende het ons die velde wat ons nodig het om ons berekeninge - die veld te gebruik op die data model, die bewegende gemiddelde tydperk, en die aantal standaardafwykings om te gebruik. Let daarop dat die bewegende gemiddelde tydperk tot 20 en die aantal standaardafwykings tot 2, die tipiese waardes vir hierdie velde is gebreke. Ten slotte het ons 'n aantal eienskappe wat CSS klasse te definieer vir die verskillende dele van die komponent. Dit bied die gebruiker met 'n baie aanpasbaarheid wanneer dit kom by stilering, maar ons stel standaard waardes, sodat die gebruiker nie die geval het om hierdie eienskappe te gee. In die komponent funksie skep ons 'n d3.svg. area om die gebied tussen die boonste en onderste bands verteenwoordig, en drie d3.svg. line voorwerpe om die boonste band verteenwoordig, laer band, en bewegende gemiddelde lyn, die opstel van hul X-waardes gepas. Im met behulp van die omgewing element omdat dis 'n baie mooi, ingeboude manier om die gebied tussen twee lyne wys. Die beste deel is, dit is regtig maklik om te gebruik - waar 'n lyn element vereis dat jy die Y-waarde te stel, 'n gebied element het twee Y-waardes - en Im baie ten gunste van die lewe maklik vir myself. In die volgende afdeling definieer ons twee funksies om die bewegende gemiddelde en die bewegende standaardafwyking te bereken. Let daarop dat Bollinger Bands gebruik die bevolking weergawe van die standaard afwyking formule. Binne-in die selection. each blok is waar ons ons swaar werk te doen - die opstel van die Y-waardes van ons verskeie SVG elemente. Ons verklaar 'n leë veranderlike, bollingerData. dan vul ons met data - dit is 'n kaart van datum AVG (bewegende gemiddelde) en SD (standaardafwyking) vir elke data-item. Ons doen dit een keer, wat op groot skaal meer doeltreffend as wat dit sou wees as ons het al hierdie berekeninge op die vlieg Aan die ander kant, beteken dit besig was om hierdie berekeninge elke keer as die komponent is OORGETEKEN as ons wou wees maksimaal doeltreffende wed kas hierdie inligting, maar dit sou ook vereis dat ons seker maak dat die data hadnt verander elke keer as ons nodig het om te teken, wat sy eie probleme bring. Die res van die selection. each blok is 'n lang, maar eenvoudig - is net die opstel van die Y-waardes vir ons omgewing en lyn elemente wat gebaseer is op die data in die kaart bollingerData. Ten slotte voeg ons die areaBands. lineUpper. lineLower en lineAverage SVG elemente om die pad. Let daarop dat ons nie stel die hele data skikking op hierdie elemente - Bollinger Bands tipies Arent getoon wanneer Theres nie genoeg data om die volle bewegende gemiddelde te bereken, so ons begin by indeks movingAverage. wat het die gewenste uitwerking. Ive nie getoon die verskillende get / stel Toegangers want hulle is nie besonder interessant, as theyre pretty much almal dieselfde: die komponent dra by tot die grafiek op OK, dis die moeilike bietjie uit die pad, so nou kan gebruik hierdie nuwe Bollinger Bands komponent. Eerste skep ons en ons komponent instel: Hier is net vertel van die komponent van die X en Y skale, en vertel dit aan die einde eiendom op die data model. Die movingAverage en standardDeviations eienskappe is opsioneel (veral omdat was net die opstel van hulle na hulle verstek waardes hier, maar youd nodig het om hulle te sluit as jy iets nie-standaard wou). Ons kan ook 'n van die vier CSS eienskappe wat die komponent ontbloot, maar Ive gekies om hulle hier weg te laat en net laat hulle met hul verstekwaardes. Met dit gedoen, voeg ons die komponent om die grafiek: Pro Wenk: Im om hierdie kode net in die voorkant van die kode na die grafiek data self te vertoon, sodat die Bollinger Bands sal wees in die agtergrond en die grafiek data sal wees in die voorgrond. Styling Dit is duidelik dat die laaste stap is om die verskillende afdelings van die komponent styl. Ive gekies om die Bollinger Bands in grys vertoon, sodat Im met behulp van 'n ligte grys vir die gebied tussen die boonste en onderste bands en 'n donkerder grys vir die bands hulself (jy kan plaas gebruik deursigtigheid aan die omgewing ligter te maak). As 'n eenkant, kennis dat Ive stel beroerte breedte: 0 op die gebied sodat dit geen grense nie die geval te wys. Ive gedoen om twee redes. Eerstens, is die tekens oor die boonste en onderste grense in elk geval, en tweedens ons nie wil 'n linker-of regter rand te vertoon - Probeer die verwydering van hierdie lyn en jy sal sien wat ek bedoel. Sit alles bymekaar, dit is die gevolg: Verbeterings Im redelik gelukkig met hierdie komponent - dit werk baie goed en sy redelik doeltreffende, programmaties. Daar is nog 'n paar verbeterings wat ons kon al doen. As jy deur die Wikipedia-inskrywing op Bollinger Bands sal jy sien dat die gebruik van 'n eenvoudige bewegende gemiddelde berekening was, maar dat ander vorme van berekening word soms gebruik ons ​​kon ons komponent uit te brei die gebruiker toelaat om te kies deur die verskaffing van 'n bykomende eiendom soos. movingAverageType om ( eksponensiële). Gevolgtrekking In hierdie artikel Ive geneem die bewegende gemiddelde komponent ek ontwikkel in my vorige artikel en gebruik dit as 'n basis vir 'n Bollinger Bands komponent. Die nuwe komponent is baie maklik om te instel en style. In oefen die bewegende gemiddelde sal 'n goeie raming van die gemiddelde van die tydreeks te verskaf indien die gemiddelde konstant of stadig verander. In die geval van 'n konstante gemiddelde, sal die grootste waarde van m die beste raming van die onderliggende gemiddelde gee. 'N langer tydperk waarneming sal gemiddeld uit die gevolge van variasie. Die doel van die verskaffing van 'n kleiner m is om voorsiening te maak die voorspelling om te reageer op 'n verandering in die onderliggende proses. Om te illustreer, stel ons 'n datastel wat veranderinge in die onderliggende gemiddelde van die tydreeks inkorporeer. Die figuur toon die tyd reeks gebruik ter illustrasie saam met die vraag gemiddelde waaruit die reeks was gegenereer. Die gemiddelde begin as 'n konstante by 10. Vanaf die tyd 21, verhoog dit met 'n eenheid in elke tydperk totdat dit die waarde van 20 ten tye 30. bereik Dan weer konstant raak dit. Die data word gesimuleer deur die byvoeging van die gemiddelde, 'n ewekansige geluid van 'n normale verspreiding met 'n nul gemiddelde en standaardafwyking 3. Die resultate van die simulasie is afgerond tot die naaste heelgetal. Die tabel toon die gesimuleerde Waarnemings wat gebruik word vir die voorbeeld. Wanneer ons die tafel gebruik, moet ons onthou dat op enige gegewe tyd, word slegs die afgelope data bekend. Die raming van die model parameter, vir drie verskillende waardes van m word saam met die gemiddelde van die tydreeks in die figuur hieronder. Die figuur toon die bewegende gemiddelde skatting van die gemiddelde by elke keer en nie die voorspelling. Die vooruitskattings sal die bewegende gemiddelde kurwes skuif na regs deur periodes. Een gevolgtrekking is onmiddellik duidelik uit die figuur. Vir al drie skattings loop die bewegende gemiddelde agter die lineêre tendens, met die lag verhoog met m. Die lag is die afstand tussen die model en die raming in die tydsdimensie. As gevolg van die lag, die bewegende gemiddelde onderskat die waarnemings as die gemiddelde is aan die toeneem. Die vooroordeel van die beramer is die verskil op 'n spesifieke tyd in die gemiddelde waarde van die model en die gemiddelde waarde voorspel deur die bewegende gemiddelde. Die vooroordeel wanneer die gemiddelde is aan die toeneem is negatief. Vir 'n dalende gemiddelde, die vooroordeel is positief. Die vertraging in die tyd en die vooroordeel wat in die raming is funksies van m. Hoe groter die waarde van m. hoe groter die omvang van die lag en vooroordeel. Vir 'n voortdurend toenemende reeks met tendens a. die waardes van die lag en vooroordeel van die beramer van die gemiddelde is in die onderstaande vergelykings. Die voorbeeld krommes stem nie ooreen hierdie vergelykings omdat die voorbeeld model is nie voortdurend aan die toeneem, eerder dit begin as 'n konstante, veranderinge aan 'n tendens en dan weer word konstant. Ook die voorbeeld krommes geraak word deur die lawaai. Die bewegende gemiddelde voorspelling van periodes in die toekoms word verteenwoordig deur die verskuiwing van die kromme na regs. Die lag en vooroordeel te verhoog proporsioneel. Die onderstaande vergelykings dui die lag en vooroordeel van 'n voorspelling tydperke in die toekoms in vergelyking met die model parameters. Weereens, hierdie formules is vir 'n tyd reeks met 'n konstante lineêre tendens. Ons moet nie verbaas wees oor die resultaat wees. Die bewegende gemiddelde beramer is gebaseer op die aanname van 'n konstante gemiddelde, en die voorbeeld het 'n liniêre tendens in die gemiddelde tydens 'n gedeelte van die studietydperk. Sedert real time reeks sal selde presies die aannames van enige model te gehoorsaam, moet ons bereid wees om vir sulke resultate. Ons kan ook aflei uit die figuur dat die variasie van die geraas het die grootste effek vir kleiner m. Die skatting is baie meer wisselvallig vir die bewegende gemiddelde van 5 as die bewegende gemiddelde van 20. Ons het die botsende begeertes te m verhoog die effek van variasie te verminder as gevolg van die geraas, en om m te verminder die voorspelling meer reageer op veranderinge aan te bring in die gemiddelde. Die fout is die verskil tussen die werklike data en die geskatte waarde. As die tyd reeks is werklik 'n konstante waarde van die verwagte waarde van die fout is nul en die variansie van die fout bestaan ​​uit 'n term wat 'n funksie is van en 'n tweede termyn wat die variansie van die geraas,. Die eerste kwartaal is die variansie van die gemiddelde geskatte met 'n monster van m waarnemings, die aanvaarding van die data kom uit 'n bevolking met 'n konstante gemiddelde. Hierdie term word tot die minimum beperk deur m so groot as moontlik. 'N Groot m maak die voorspelling nie reageer op 'n verandering in die onderliggende tydreekse. Die voorspelling reageer op veranderinge aan te bring, wil ons m so klein as moontlik (1), maar dit verhoog die foutvariansie. Praktiese vooruitskatting vereis 'n intermediêre waarde. Vooruitskatting met Excel Die vooruitskatting add-in implemente die bewegende gemiddelde formules. Die voorbeeld hieronder toon die analise wat deur die byvoeging in vir die voorbeeld van die data in kolom B. Die eerste 10 waarnemings word geïndekseer -9 deur 0. In vergelyking met die tabel hierbo, is die tydperk indekse verskuif deur -10. Die eerste tien Waarnemings verskaf die begin waardes vir die beraming en gebruik word om die bewegende gemiddelde vir tydperk 0. Die MA (10) kolom (C) toon die berekende bewegende gemiddeldes te bereken. Die bewegende gemiddelde parameter m is in sel C3. Vore (1) kolom (D) toon 'n voorspelling vir een periode na die toekoms. Die voorspelling interval is in sel D3. Wanneer die voorspelling interval verander word na 'n groter aantal van die getalle in die kolom vore geskuif af. Die kolom Fout (1) (e) toon die verskil tussen die waarneming en die voorspelling. Byvoorbeeld, die waarneming by die tyd 1 is 6. Die geskatte waarde uit die bewegende gemiddelde op tydstip 0 is 11.1. Die fout dan is -5,1. Die gemiddeldes en standaardafwykings Gemiddelde Afwyking (MAD) word bereken in selle E6 en E7 respectively. Calculating bewegende gemiddelde in Excel In hierdie kort handleiding sal jy leer hoe om 'n eenvoudige bewegende gemiddelde in Excel vinnig te bereken, wat funksies te gebruik om te beweeg gemiddeld vir die laaste n dae, weke, maande of jare, en hoe om 'n bewegende gemiddelde tendenslyn te voeg tot 'n Excel grafiek. In 'n paar onlangse artikels, het ons 'n vinnige blik op die berekening van die gemiddelde in Excel geneem. As jy het al die volg van ons blog, jy reeds weet hoe om 'n normale gemiddelde te bereken en watter funksies te gebruik om geweegde gemiddelde vind. In vandag se handleiding, sal ons twee basiese tegnieke bespreek om te bereken bewegende gemiddelde in Excel. Wat is bewegende gemiddelde algemeen bewegende gemiddelde (ook na verwys as rollende gemiddelde. Hardloop gemiddelde of bewegende gemiddelde) kan gedefinieer word as 'n reeks van gemiddeldes vir verskillende onderafdelings van dieselfde datastel. Dit word dikwels gebruik in statistiek, seisoenaal-aangepaste ekonomiese en weervoorspelling om onderliggende tendense verstaan. In-beurs, bewegende gemiddelde is 'n aanduiding dat die gemiddelde waarde van 'n sekuriteit oor 'n gegewe tydperk toon. In besigheid, sy 'n algemene praktyk om 'n bewegende gemiddelde van verkope te bereken vir die laaste 3 maande om te bepaal die onlangse tendens. Byvoorbeeld, kan die bewegende gemiddelde van drie maande temperature word bereken deur die gemiddeld van temperature van Januarie tot Maart, dan is die gemiddelde temperatuur vanaf Februarie tot April, dan Maart tot Mei, en so aan. Daar bestaan ​​verskillende tipes bewegende gemiddelde soos eenvoudige (ook bekend as rekenkundige), eksponensiële, veranderlike, driehoekige, en geweeg. In hierdie handleiding, sal ons kyk na die mees algemeen gebruik word eenvoudig bewegende gemiddelde. Berekening van eenvoudige bewegende gemiddelde in Excel Algehele, is daar twee maniere om 'n eenvoudige bewegende gemiddelde te kry in Excel - deur die gebruik van formules en tendenslyn opsies. Die volgende voorbeelde te demonstreer sowel tegnieke. Voorbeeld 1. Bereken bewegende gemiddelde vir 'n sekere tydperk 'n Eenvoudige bewegende gemiddelde kan in geen tyd met 'n gemiddelde funksie bereken. Veronderstel jy het 'n lys van die gemiddelde maandelikse temperature in kolom B, en jy wil 'n bewegende gemiddelde vir 3 maande vind (soos in die beeld hierbo). Skryf 'n gewone gemiddelde formule vir die eerste 3 waardes en insette dit in die ry wat ooreenstem met die 3de waarde van die top (sel C4 in hierdie voorbeeld), en dan die formule kopieer na ander selle in die kolom: Jy kan regmaak die kolom met 'n absolute verwysing (soos B2) as jy wil, maar seker wees om relatiewe ry verwysings (sonder die teken) gebruik sodat die formule pas behoorlik vir ander selle. Onthou dat 'n gemiddelde word bereken deur die toevoeging van waardes en dan verdeel die som deur die aantal waardes te gemiddeld, kan jy die resultaat te verifieer deur die gebruik van die sommeskadeleer: Voorbeeld 2. Kry bewegende gemiddelde vir 'n die laaste N dae / weke / maande / jare in 'n kolom Veronderstel jy het 'n lys van data, bv verkoop figure of voorraadkwotasies, en jy wil die gemiddelde van die afgelope 3 maande op enige punt van die tyd weet. Vir hierdie, 'n formule wat die gemiddelde so gou sal herbereken as jy nie 'n waarde vir die volgende maand te betree wat jy nodig het. Wat Excel-funksie in staat is om dit te doen die goeie ou gemiddeld in kombinasie met verreken en te tel. GEMIDDELDE (sprong (eerste seltelling (hele reeks) -. N, 0, N, 1)) waar n die aantal van die laaste dae / weke / maande / jare in die gemiddelde in te sluit. Nie seker hoe om hierdie bewegende gemiddelde formule te gebruik in jou werkbladen Die volgende voorbeeld sal dinge duideliker te maak. Die veronderstelling dat die waardes te gemiddeld is in kolom B begin in ry 2, die formule soos volg sal wees: En nou, Kom ons probeer om te verstaan ​​wat hierdie Excel bewegende gemiddelde formule is eintlik doen. Die telling funksie COUNT (B2: B100) tel hoeveel waardes reeds in kolom B. ingeskryf Ons begin tel in B2 omdat ry 1 is die kolomkop. Die afset funksie neem sel B2 (die 1ste argument) as die beginpunt, en neutraliseer die telling (die waarde wat deur die telling funksie) deur die verskuiwing van 3 rye up (-3 in die 2de argument). As gevolg, dit gee terug Die Som van waardes in 'n reeks wat bestaan ​​uit 3 rye (3 in die 4de argument) en 1 kolom (1 in die laaste argument), wat is die jongste 3 maande wat ons wil hê. Ten slotte, is die teruggekeer som geslaag om die GEMIDDELDE funksie om die bewegende gemiddelde te bereken. Tip. As jy besig is met voortdurend updatable werkvelle waar nuwe rye is geneig om te word bygevoeg in die toekoms, is seker 'n voldoende aantal rye te voorsien aan die telling funksie om potensiële nuwe inskrywings te akkommodeer. Dit is nie 'n probleem as jy sluit meer rye as eintlik nodig solank jy die eerste sel reg, die telling funksie sal al leë rye in elk geval weggooi. As jy dalk opgemerk het, die tafel in hierdie voorbeeld bevat data vir slegs 12 maande, en nog die reeks B2: B100 verskaf tel, net om te wees op die red kant :) Voorbeeld 3. Kry bewegende gemiddelde vir die laaste N waardes in 'n ry as jy wil 'n bewegende gemiddelde vir die laaste n dae, maande, jare, ens in dieselfde ry te bereken, kan jy die Offset formule aan te pas op hierdie manier: Veronderstel B2 is die eerste getal in die ry, en jy wil om die laaste 3 nommers in die gemiddelde sluit, die formule neem die volgende vorm: die skep van 'n Excel bewegende gemiddelde grafiek As jy reeds 'n grafiek geskep vir jou data, en voeg 'n bewegende gemiddelde tendenslyn vir daardie term is 'n kwessie van sekondes. Vir hierdie, gaan ons gebruik Excel Trendline funksie en die gedetailleerde stappe volg hieronder. Vir hierdie voorbeeld, Ive het 'n 2-D grafiek kolom (Voeg blad GT Charts groep) vir ons verkope data: En nou, ons wil hê dat die bewegende gemiddelde visualiseer vir 3 maande. In Excel 2010 en Excel 2007, gaan aan die uitleg GT Trendline GT Meer Trendline Options. Tip. As jy nie nodig het om die besonderhede soos die bewegende gemiddelde interval of name spesifiseer, kan jy kliek Design GT Voeg Chart Element GT Trendline GT bewegende gemiddelde vir die onmiddellike gevolg. Die paneel formaat Trendline sal open op die regterkant van jou werkblad in Excel 2013, en die ooreenstemmende dialoog sal pop-up in Excel 2010 en 2007.To verfyn jou chat, kan jy op oorskakel na die vul amp Line of blad Effects die paneel formaat Trendline en speel met verskillende opsies soos tipe lyn, kleur, breedte, ens vir kragtige data-analise, wil jy dalk 'n paar bewegende gemiddelde trendlines voeg met verskillende tydintervalle om te sien hoe die tendens ontwikkel. Die volgende kiekie toon die 2 maande (groen) en 3 maande (baksteenrooi) bewegende gemiddelde trendlines: Wel, dis alles oor die berekening van bewegende gemiddelde in Excel. Die monster werkblad met die bewegende gemiddelde formules en tendenslyn is beskikbaar vir aflaai - Moving Gemiddelde sigblad. Ek dank u vir die lees en sien uit daarna om te sien hoe jy volgende week Jy kan ook geïnteresseerd in: Skep 'n Yahoo Finansies grafiek met D3 en d3fc meeste kartering biblioteke is monoliete. Die meer funksies wat hulle ondersteun, hoe meer lomp hul API's is geneig om te word. Met die d3fc projek het ons ondersoek 'n alternatiewe benadering, die bou van kaarte uit 'n stel van klein komponente, met behulp van die D3 biblioteek. In hierdie pos wil ek die krag van beide d3fc en D3 demonstreer deur herskep die eerder komplekse Yahoo Finansies grafiek. Die skep van 'n pixel-perfekte ontspanning van hierdie grafiek met 'n monolitiese kartering biblioteek sal 'n groot uitdaging wees (indien nie onmoontlik nie). Met d3fc dit is verbasend eenvoudige Hierdie pos neem 'n stap-vir-stap benadering te demonstreer hoe die Yahoo Finansies grafiek getrou kan herskep. Die lewering van 'n eenvoudige grafiek d3fc en sy afhanklikheid is beskikbaar via NPM soos uiteengesit in die installasie-instruksies. d3fc skep kaarte met behulp van SVG, sodat die eerste stap is om 'n SVG element te voeg aan die bladsy: Die Yahoo Finansies data is beskikbaar as CSV data deur middel van 'n nie-ondersteunde, nog wyd gebruik API. D3 het 'n aantal van nut funksies vir die afhaal en ontleding van data, insluitend CSV. Die volgende kode voer 'n XHR versoek via d3.csv: Sodra die data gehaal is en ontleed, is die volgende renderChart funksie genoem: As ons kyk na hierdie kode in detail, die eerste stap bou 'n fc. chart. linearTimeSeries. Dit is 'n relatief hoë vlak d3fc komponent wat 'n grafiek met 'n horisontale datum as en 'n vertikale numeriese as lewer. Die vernaamste verantwoordelikheid is om 'n SVG uitleg wat die verskillende dele van die grafiek (byle, plot area, ens) huisves bou. Die fc. util. extent nutsfunksie word gebruik om die mate (maksimum en min waardes) van verskillende eienskappe van die data te bereken. Volgende n d3fc gebied reeks is gebou, waar die accessor eiendom yValue word gebruik om die oop waarde van elke datapoint kies. Die verstek xValue accessor vir die meeste komponente verwag 'n datum eiendom, wat die geval is in hierdie voorbeeld. Die kaarte plotArea is ingestel op die gebied reeks komponent, om te verseker dat die omgewing reeks het die korrekte skale toegepas. Ten slotte, is die SVG element gekies met behulp van d3.select. die data is gebind, en die grafiek komponent 'n beroep op die seleksie. As jy het al 'n paar ervaring met D3 het, moet hierdie konstruksie patroon heeltemal aan jou bekend wees. Die d3fc komponente volg die D3 komponent patroon. Die eenvoudige kode bogenoemde resultate word in die volgende grafiek: raster Optel en lyn Waar ander kartering biblioteke lyn, punt en gebied as 'n enkele tipe reeks kan verteenwoordig, d3fc verkies 'n mikro komponent benadering waar elke afsonderlike. Vir hierdie grafiek 'n gebied en lyn reeks vereis: Roosterlyne is 'n ander d3fc komponent: Die grafiek plot area aanvaar slegs 'n enkele reeks egter verskeie reeks gevalle (wat x en y skale het) kan saam gegroepeer word met behulp van 'n multi-reeks: Die multi-reeks skep 'bevat g element vir elk van die gegewe reeks, stel hul x en y skale en propageer die data aan elke. Met raster, omgewing en lyn reeks gevoeg, en 'n paar klein tweaked die aantal bosluise, die grafiek lyk soos die volgende: Styling d3fc komponente styl via CSS. Die maklikste manier om die geskikte CSS keurders te bepaal vir stilering n komponent is om net te kyk na die dienste uitset. Die Yahoo grafiek het 'n subtiele helling wat toegepas word om die gebied reeks. Svg verval is (eerder lomp) omskryf in SVG soos volg: Let daarop dat die roeping van die linearTimeSeries komponent op die bogenoemde SVG nie die defs element vernietig. d3fc komponente is geskryf in soos dat hulle hul eie elemente te identifiseer via CSS klas, sodat hierdie elemente saam ander te leef in dieselfde houer. Met 'n paar eenvoudige CSS die helling en lyn style kan toegepas word op die grafiek. Ongelukkig is dit nie moontlik om weer posisie etikette D3 as via CSS. Die enigste manier om dit reg te kry is om te lewer die as gebruik dan 'n D3 seleksie na die etikette op te spoor toe hulle beweeg direk: Dit is nie ideaal as die bogenoemde kode sal uitgevoer word elke keer as die kaarte is gelewer, ongeag of die asse vereis updates . Met hierdie stilering in die plek van die grafiek lyk soos die volgende: Voeg 'n bewegende gemiddelde d3fc het 'n aantal van finansiële aanwysers, hierdie algoritmes is direk toegepas word op die grafiek data, met die standaard implementering toevoeging van nuwe eienskappe om die data (dit kan verander word deur verskaffing van 'n persoonlike merge funksie). Die volgende bere 'n eksponensiële bewegende gemiddelde (EMA) gebaseer op die geslote prys: Om 'n aanduiding te lewer, is 'n geskikte vertoning nodig. 'N EMO bere 'n enkele waarde vir elke datapoint, en word gelewer deur 'n gereelde lyn reeks, maar vir meer komplekse aanwysers (MACD, Bollinger) d3fc voorrade toegewy render. bo die kode dui op die versier patroon wat kan gevind word op die meeste d3fc komponente. Versier is verby 'n seleksie wat geskep word as gevolg van die komponente data aan te sluit. As jy nie vertroud is met hierdie konsep, Id beveel Mikes denke Bundelt artikel. In die bogenoemde kode, die verskaf om te versier seleksie is die update keuring vir die komponente wortel g element. Die betree seleksie gebruik word om 'n ema klas toe te voeg tot hierdie element. Kennis dat deur die gebruik van die voer seleksie, dit is net een keer gedoen, op die punt van die element is aanvanklik gebou. Nota: Hierdie betree seleksie is nie heeltemal dieselfde as die een waarvoor 'n standaard data aan te sluit, in hierdie geval die tik seleksie reeds 'n element bygevoeg. Jy sal sien versier gebruik word in 'n hele paar plekke in hierdie voorbeeld, dit is 'n kragtige en veelsydige patroon. Met die EMO reeks gevoeg om die multi-reeks die grafiek lyk soos die volgende: Voeg 'n volume grafiek Die Yahoo Finansies grafiek toon die verhandel volume in die onderste helfte van die plot area, dit is 'n redelik standaard finansiële kartering uitleg. Met die oog op die volume grafiek lewer, is 'n sekondêre y-skaal wat nodig is, met die domein gebaseer op die volume data in, en die stel aan die helfte van die hoogte van die plot area reeks. Die linearTimeSeries nie die geval is 'n volume skaal as deel van sy uitleg, dit is iets wat met die hand bygevoeg het. Die linearTimeSeries gebruik die d3fc uitleg komponent, wat flexbox uitleg geïmplementeer, so dit maak sin om dit te gebruik om 'n houer vir die volume reeks ook te skep. Die volgende skep 'n g element wat dien as 'n houer vir die volume reeks: Eerder as om voeg 'n g element direk in die houer, is dit aangeheg binne 'n data aan te sluit betree seleksie. Dit verseker dat slegs 'n enkele element ongeag bygevoeg van hoeveel keer die renderChart funksie genoem. Die voorbeeld hierbo is 'n relatief eenvoudige uitleg, vir 'n meer komplekse voorbeeld pop oor die d3fc webwerf. A volume skaal is gebou met 'n domein wat gebaseer is op die insette data en 'n reeks gebaseer op die hoogte van die volume houer Uiteindelik, is 'n volume-reeks gebou en gelewer: Dit lei tot die volgende grafiek: kleur die volume bars Die finale stap in hierdie voorbeeld is aan elke bar van die volume grafiek gebaseer op die vraag of die prys gestyg het of geval binne die tydperk wat deur die gegewe bar kleur. Weereens versier in diens: As jy kyk na die SVG elemente gebou vir 'n bar-reeks sal jy vind dat elke staaf is opgebou uit 'n g element met 'n enkele pad. bo die versier funksie maak gebruik van die voer seleksie, wat hierdie g elemente bevat, kies die sub-pad en geld 'n geskikte beroerte kleur gebaseer op die rigting van die prys beweging. Die grafiek is nou besig om te kyk hou van die Yahoo Finansies grafiek: Gevolgtrekkings In hierdie blog post youve gesien hoe d3fc komponente kan vergader, ingestel en versier 'n relatief komplekse finansiële grafiek herskep, maar dit is nog net nie voltooi nie. In my volgende post Siek show kan hoe d3fc legende en kruis komponente bygevoeg word om 'n paar interaktiwiteit bied, en hoe om 'n persoonlike diskontinuïteit verskaffer te skep Tot dan, indien u enige vrae oor d3fc of hierdie voorbeeld, in verbinding óf via die veld kommentaar hieronder, of via die GitHub projek. Vriendelike groete, Colin E. Ek Tegnologie Direkteur by Scott Logika en is 'n produktiewe tegniese skrywer, blogger en spreker op 'n verskeidenheid van tegnologieë. Vir 'n aantal jare het ek met die Microsoft stapel tegnologie, insluitend WPF, WCF, Silver en Windows Phone. Meer onlangs het ek gediversifiseer om HTML5, JavaScript en IOS ontwikkeling in te sluit.