Vraag Zoomable, Google-Finance-stijl tijdreeksgrafiek in D3 of Rickshaw? [Gesloten]


Ik wil een lijngrafiek in de tijdreeks maken in D3, met een kleinere versie van de onderstaande grafiek waarmee de gebruiker kan inzoomen op bepaalde delen van de grafiek, zoals een Google Finance-grafiek.

Het dichtstbijzijnde voorbeeld dat ik heb gevonden is deze zweeftabel:

http://bl.ocks.org/1962173

Heeft iemand voorbeelden van dit te doen met een lijngrafiek in D3?

NB: ik wil absoluut een kleine versie van de grafiek met een aanpasbare borstel bovenop, niet een puur dragbare / zoombare x-as, zoals dit voorbeeld.

Idealiter zou ik willen gebruiken Riksja, maar de Riksja-voorbeelden lijkt alleen een bereikschuifregelaar te hebben. Dus een Riksja-voorbeeld zou nog beter zijn.


29
2017-08-13 10:45


oorsprong


antwoorden:


NVD3 is een heel cool project met een aantal herbruikbare kaarten geschreven op D3. Zien hier voor een voorbeeld van een lijndiagram met een zoeker, samen met de broncode.

NVD3.js Line Chart with View Finder

Bijwerken: Het NVD3-voorbeeld linkt nu ook naar een voorbeeld van Mike Bostock's (maker van D3) die vergelijkbare functionaliteit vertoont, de mogelijkheid om in te zoomen / focussen op een selectie van de gegevens, puur geïmplementeerd met D3.js.

D3.js Focus+Context via Brushing


31
2017-08-16 16:16



dygraphs doet precies wat je wilt in deze demo:

http://dygraphs.com/gallery/#g/range-selector

enter image description here


14
2018-04-22 02:44



Wat dacht je van HighStock, HighCharts minder bekende broer of zus?

enter image description here


6
2017-09-10 17:43



Ik weet dat je D3 wilt gebruiken, maar Bescheiden financiën moet de moeite waard zijn om te vermelden omdat het precies doet wat je wilt met alleen javascript en canvases.

Als je echt van plan bent om D3 te gebruiken, denk ik dat je iets van jezelf moet maken dat een verspilling van tijd moet zijn, gegeven hoe goed en geschikt bescheiden financiën zijn.

Tip voor het proberen van Humble Finance: de zip-download bevat geen flotr2 die het vereist, maar het kan eenvoudig worden gedownload van hier (uiteraard moet je dan de vereiste flotr2-bestanden toevoegen aan de Humble Finance-directory op de juiste plaats).

Bewerk:

Negeer Humble Finance, ik heb er veel gebruik van gemaakt en het dreven me de bocht. De codebasis leek nogal rommelig en je moest uiteindelijk veel te veel bibliotheken aan je pagina toevoegen om het te laten werken, het is dan erg moeilijk om zelfs maar kleine wijzigingen in de grafiek aan te brengen. Ik gebruik nu D3, maar ik vond dat SVG te langzaam wordt weergegeven met veel (heel veel) punten op de curve. Ik heb uiteindelijk D3 gebruikt om de assen te tekenen, de schalen in te stellen en het tijdframe te veranderen en de curve te tekenen met een canvas. Dat lijkt vrij goed te werken. Sorry, ik heb het voorbeeld niet overal zichtbaar.


4
2017-12-09 19:06



Ik ben waarschijnlijk een beetje laat op het feest, maar mijnheer Bostock heeft het onlangs verstrekt een uitstekend voorbeeld van wat je zoekt.


4
2017-09-24 13:48



Heb je gezien Crossfilter? Een ander aanbod op basis van D3, dat vergelijkbare eigenschappen heeft als de interface van Google Finance.


3
2017-08-14 14:20



Ik ben niet bekend met een van de frameworks die je noemt, maar vroeg me af of dit een optie was die je kon gebruiken google grafieken in plaats daarvan? Met behulp van deze zou u in staat zijn om wat ze doen in Google Finance en het voorbeeld voor hoe het te doen zou kunnen worden genomen van hun website.

Als je op zoek bent naar andere frameworks om te bekijken, kan ik Emprise Charts aanbevelen - ik ben er vrij zeker van dat je daar iets dergelijks zou kunnen doen en hun ontwikkelteam is erg behulpzaam.


0
2017-08-13 10:55



Riksja ondersteunt dit nu!

Zien voorbeeld en Rickshaw.Graph.RangeSlider.Preview.


0
2017-07-19 09:54



Dus het beste antwoord dat ik heb gevonden is het /examples/zoom/zoom.html bestand in de D3 reproduceert zichzelf. Geen lijngrafiek, maar eenvoudig aan te passen.


-1
2017-08-14 00:34