d3.js
Robuust, responsief en herbruikbaar (r3) maken voor d3

Invoering

Scatterplot

Dit voorbeeld bevat in totaal meer dan 1000 coderegels (te veel om hier in te sluiten). Om deze reden is alle code toegankelijk op http://blockbuilder.org/SumNeuron/956772481d4e625eec9a59fdb9fbe5b2 (alternatief gehost op https://bl.ocks.org/SumNeuron/956772481d4e625eec9a59fdb9fbe5b2) . Merk op dat bl.ocks.org iframe gebruikt, dus om het formaat te zien moet je op de knop open klikken (rechter benedenhoek van het iframe). Omdat er veel code is, is deze opgedeeld in meerdere bestanden en zal het relevante codesegment zowel naar bestandsnaam als naar regelnummer verwijzen. Open dit voorbeeld als we het doornemen.

Wat maakt een grafiek?

Er zijn verschillende kerncomponenten die in elke complete grafiek kunnen worden verwerkt; namelijk deze omvatten:

• titel
• as
• assen labels
• de gegevens

Er zijn andere aspecten die kunnen worden opgenomen, afhankelijk van de grafiek, bijvoorbeeld een grafieklegenda. Veel van deze elementen kunnen echter worden omzeild met knopinfo. Om die reden zijn er interactieve kaartspecifieke elementen - bijv. Knoppen om tussen gegevens te schakelen.

Omdat de inhoud van onze grafiek interactief is, zou het passend zijn als de grafiek zelf dynamisch zou zijn - bijvoorbeeld het formaat wijzigen wanneer de grootte van het venster verandert. SVG is schaalbaar, dus u kunt gewoon toestaan dat uw grafiek wordt geschaald met behoud van het huidige perspectief. Afhankelijk van het ingestelde perspectief kan de grafiek echter te klein worden om leesbaar te zijn, zelfs als er nog voldoende ruimte is voor de grafiek (bijvoorbeeld als de breedte groter is dan de hoogte). Daarom kan het de voorkeur verdienen om de grafiek gewoon in de resterende grootte opnieuw te tekenen.

In dit voorbeeld wordt uitgelegd hoe u de plaatsing van de knoppen, titel, assen, aslabels dynamisch kunt berekenen en gegevenssets van verschillende hoeveelheden gegevens kunt verwerken

Opgericht

Configuratie

Omdat we streven naar hergebruik van code, moeten we een configuratiebestand maken met algemene opties voor aspecten van onze grafiek. Een voorbeeld van een dergelijk configuratiebestand is charts_configuration.json .

Als we dit bestand bekijken, kunnen we zien dat ik verschillende elementen heb opgenomen die al duidelijk gebruik hadden moeten zijn bij het maken van onze grafiek:

• bestanden (slaat de string op voor waar onze grafiekgegevens worden bewaard)
• document_state (welke knop is momenteel geselecteerd voor onze grafiek)
• chart_ids (html-id's voor de grafieken die we gaan maken)
• svg (opties voor de svg, bijv. grootte)
• plot_attributes
  • titel (verschillende lettertypekenmerken instellen)
  • knopinfo (verschillende tooltip-stijleigenschappen instellen)
  • assen (verschillende lettertypekenmerken instellen)
  • knoppen (verschillende lettertype- en stijlkenmerken instellen)
• percelen
  • spreiding (stel verschillende aspecten van onze spreidingsplot in, bijv. puntradius)
• kleuren (een specifiek kleurenpalet om te gebruiken)

Helper functies

Naast het instellen van deze globale aspecten moeten we enkele helperfuncties definiëren. Deze zijn te vinden onder helpers.js

• ajax_json (laad json-bestanden synchroon of asynchroon)
• keys (retourneert sleutels van het gegeven object - gelijk aan d3.keys ())
• parseNumber (een algemeen nummer parseren als we niet weten welk type of nummer is)
• typeofNumber ( typeofNumber terug)

index.html

Ten slotte moeten we ons html-bestand instellen. Ten behoeve van dit voorbeeld zullen we onze tabel kwam in section tag waar de id overeenkomt met de ID die in het configuratiebestand (line 37). Aangezien percentages alleen werken als ze kunnen worden berekend op basis van hun bovenliggend lid, nemen we ook enkele basisstijlen op (regels 19-35)

Ons spreidingsdiagram maken

Laten we make_scatter_chart.js openen. Laten we nu goed kijken naar regel 2, waar veel van de belangrijkste variabelen vooraf zijn gedefinieerd:

• svg - d3 selectie van svg van de kaart
• chart_group - d3 selectie van de groep binnen de svg waarin de gegevens worden geplaatst
• canvas - kernaspecten van het svg-extract voor het gemak
• marges - de marges waarmee we rekening moeten houden
• maxi_draw_space de grootste x- en y-waarden waarin we onze gegevens kunnen tekenen
• doc_state - de huidige status van het document als we knoppen gebruiken (in dit voorbeeld zijn we)

Je hebt misschien gemerkt dat we de svg niet in de html hebben opgenomen. Daarom moeten we, voordat we iets met onze grafiek kunnen doen, de svg toevoegen aan index.html als deze nog niet bestaat. Dit wordt bereikt in het bestand make_svg.js door de functie make_chart_svg . Kijkend naar make_svg.js we dat we de helperfunctie parseNumber op de parseNumber voor de svg-breedte en -hoogte. Als het nummer een float is, maakt het de breedte en hoogte van de svg evenredig met de breedte en hoogte van de sectie. Als het getal een geheel getal is, wordt het gewoon ingesteld op die gehele getallen.

Regel 6 - 11 test om te zien - in feite - of dit de eerste oproep is of niet en stelt de chart_group (en documentstatus als het de eerste oproep is).

Regel 14 - 15 extraheert de momenteel geselecteerde gegevens door op de knop te klikken; regel 16 stelt data_extent . Hoewel d3 een functie heeft voor het extraheren van de gegevensomvang, geef ik er de voorkeur aan de gegevensomvang op te slaan in deze variabele.

Lijnen 27 - 38 bevatten de magie die ons diagram opzet door de marges, de knoppen, de titel en de assen te maken. Deze zijn allemaal dynamisch bepaald en lijken misschien een beetje ingewikkeld, dus we zullen ze om de beurt bekijken.

make_margins (in make_margins.js)

We kunnen zien dat het margesobject rekening houdt met wat ruimte aan de linker-, rechter-, boven- en onderkant van de grafiek (respectievelijk x.left, x.right, y.top, y.bottom), de titel, de knoppen en de assen.

We zien ook dat de assenmarges worden bijgewerkt in regel 21.

Waarom doen we dit? Welnu, tenzij we het aantal teken aangeven, de tekenlabels de tekengrootte en de tekenlabellettergrootte, konden we de grootte niet berekenen die de assen nodig hebben. Zelfs dan zouden we nog steeds de ruimte tussen de teeklabels en de teken moeten schatten. Daarom is het gemakkelijker om enkele dummy-assen te maken met behulp van onze gegevens, te zien hoe groot de overeenkomstige svg-elementen zijn en vervolgens de grootte terug te geven.

We hebben eigenlijk alleen de breedte van de y-as en de hoogte van de x-as nodig, wat is opgeslagen in axes.y en axes.x.

Met onze standaardmarges ingesteld, berekenen we vervolgens de max_drawing_space (regels 29-34 in make_margins.js)

make_buttons (in make_buttons.js)

De functie maakt een groep voor alle knoppen en vervolgens een groep voor elke knop, die op zijn beurt een cirkel en een tekstelement opslaat. Lijn 37 - 85 berekent de positie van de knoppen. Het doet dit door te kijken of de tekst rechts van de lengte van elke knop langer is dan de ruimte die we hebben om in te tekenen (regel 75). Als dit het geval is, wordt de knop een regel omlaag geplaatst en worden de marges bijgewerkt.

make_title (in make_title.js)

make_title is vergelijkbaar met make_buttons in die zin dat het de titel van uw grafiek automatisch opsplitst in meerdere lijnen en eventueel koppelteken. Het is een beetje hacky omdat het niet de verfijning van het afbreekschema van TeX heeft, maar het werkt voldoende goed. Als we meer dan één lijn nodig hebben, worden de marges bijgewerkt.

Met de knoppen, titel en marges ingesteld, kunnen we onze assen maken.

make_axes (in make_axes.js)

De logica van make_axes weerspiegelt die voor het berekenen van de ruimte die nodig is voor de dummy assen. Hier voegt het echter overgangen toe om tussen assen te wisselen.

Eindelijk onze spreidingsplot

Met dat alles klaar is, kunnen we eindelijk onze spreidingsplot maken. Omdat onze datasets een ander aantal punten kunnen hebben, moeten we hier rekening mee houden en dienovereenkomstig de enter- en exit-evenementen van d3 benutten. Het verkrijgen van het aantal reeds bestaande punten wordt gedaan in regel 40. De if-instructie in regel 45 - 59 voegt meer cirkelelementen toe als we meer gegevens hebben, of zet de extra elementen in een hoek en verwijdert ze vervolgens als er teveel zijn.

Zodra we weten dat we het juiste aantal elementen hebben, kunnen we alle resterende elementen naar hun juiste positie verplaatsen (regel 64)

Ten slotte voegen we tooltip toe in regel 67 en 68. De tooltip-functie staat in make_tooltip.js

Box en Whisker Chart

Om de waarde van het maken van gegeneraliseerde functies zoals die in het vorige voorbeeld (make_title, make_axes, make_buttons, enz.) Weer te geven, overweeg dit vak en de whiskerdiagram: https://bl.ocks.org/SumNeuron/262e37e2f932cf4b693f241c52a410ff

Hoewel de code voor het maken van de dozen en snorharen intensiever is dan alleen het plaatsen van de punten, zien we dat dezelfde functies perfect werken.

Staafdiagram

https://bl.ocks.org/SumNeuron/7989abb1749fc70b39f7b1e8dd192248