d3.js
Att göra robust, lyhörd och återanvändbar (r3) för d3

Introduktion

Scatter plot

Detta exempel innehåller totalt över 1000 rader kod (för mycket för att inbäddas här). Därför är all kod tillgänglig på http://blockbuilder.org/SumNeuron/956772481d4e625eec9a59fdb9fbe5b2 (alternativt värd på https://bl.ocks.org/SumNeuron/956772481d4e625eec9a59fdb9fbe5b2) . Observera att bl.ocks.org använder iframe så för att se storleksändring måste du klicka på knappen öppen (nedre högra hörnet av iframe). Eftersom det finns mycket kod har den delats upp i flera filer och det relevanta kodsegmentet kommer att hänvisas både till filnamn och radnummer. Öppna detta exempel när vi går igenom det.

Vad gör ett diagram?

Det finns flera kärnkomponenter som går in i alla kompletta diagram; nämligen dessa inkluderar:

• titel
• axlar
• axlar etiketter
• uppgifterna

Det finns andra aspekter som kan inkluderas beroende på diagrammet - t.ex. en kartläggning. Många av dessa element kan emellertid kringgås med verktygstips. Därför finns det interaktiva diagramspecifika element - t.ex. knappar för att växla mellan data.

Eftersom vårt diagrams innehåll kommer att vara interaktivt, skulle det vara lämpligt att själva diagrammet är dynamiskt - t.ex. ändra storlek när fönsterets storlek ändras. SVG är skalbar, så att du bara kan tillåta att ditt diagram ska skalas under upprätthållande av det aktuella perspektivet. Beroende på inställt perspektiv kan dock diagrammet bli för litet för att kunna läsas även om det fortfarande finns tillräckligt med utrymme för diagrammet (t.ex. om bredden är större än höjden). Därför kan det vara att föredra att bara rita om diagrammet i återstående storlek.

Detta exempel kommer att täcka hur man dynamiskt kan beräkna placering av knappar, titel, axlar, axeletiketter samt hantera datauppsättningar med olika datamängder

Uppstart

Konfiguration

Eftersom vi strävar efter återanvändning av koder, bör vi skapa en konfigurationsfil som innehåller globala alternativ för aspekter av vårt diagram. Ett exempel på en sådan konfigurationsfil är charts_configuration.json .

Om vi tittar på den här filen kan vi se att jag har inkluderat flera element som redan bör ha tydlig användning för när vi gör vårt diagram:

• filer (lagrar strängen där våra kartdata finns)
• document_state (vilken knapp som för närvarande är vald för vårt diagram)
• chart_ids (html-id för diagrammen vi kommer att göra)
• svg (alternativ för svg, t.ex. storlek)
• plot_attributes
  • titel (ställ in olika typsnittsattribut)
  • verktygstips (ställa in olika egenskaper för verktygstipsstil)
  • axlar (ange olika typsnittsattribut)
  • knappar (ställ in olika typsnitt och stilattribut)
• tomter
  • scatter (ställa in olika aspekter av vår scatter-plot, t.ex. punktradie)
• färger (en specifik färgpalett att använda)

Hjälparfunktioner

Förutom att ställa in de globala aspekterna måste vi definiera några hjälpfunktioner. Dessa kan hittas under helpers.js

• ajax_json (ladda json-filer antingen synkront eller asynkront)
• keys (returnerar nycklar för det givna objektet - motsvarande d3.keys ())
• parseNumber (ett allmänt nummer förfaras om vi inte vet vilken typ eller nummer är)
• typeofNumber (returnera typeofNumber )

index.html

Slutligen bör vi ställa in vår HTML-fil. I det här exemplet sätter vi vårt diagram i en section där id matchar det id som anges i konfigurationsfilen (rad 37). Eftersom procentsatser bara fungerar om de kan beräknas från deras föräldremedlem inkluderar vi också en del grundläggande styling (rad 19-35)

Gör vår scatter-plot

Låt oss öppna make_scatter_chart.js . Låt oss nu följa rad 2, där många av de viktigaste variablerna är fördefinierade:

• svg - d3 urval av diagrammets svg
• chart_group - d3 val av gruppen i svg som data kommer att placeras i
• duk - kärnaspekter av svg-extraktet för bekvämlighet
• marginaler - de marginaler vi behöver ta hänsyn till
• maxi_draw_space de största x- och y-värdena där vi kan dra våra data
• doc_state - dokumentets nuvarande tillstånd om vi använder knappar (i det här exemplet är vi)

Du kanske har lagt märke till att vi inte inkluderade svg i html. Innan vi kan göra något med vårt diagram måste vi därför lägga till svg till index.html om det inte ännu finns. Detta uppnås i filen make_svg.js med funktionen make_chart_svg . När vi tittar på make_svg.js ser vi att vi använder hjälpfunktionen parseNumber för svg bredd och höjd. Om numret är en flottör, gör det svg: s bredd och höjd proportionell till dess sektions bredd och höjd. Om numret är ett heltal kommer det bara att ställa in det på dessa heltal.

Linjer 6 - 11 tester för att se - i kraft - om detta är det första samtalet eller inte och ställer in chart_group (och dokumenttillståndet om det är det första samtalet).

Rad 14 - 15 extraherar den nuvarande valda informationen med den klickade knappen; rad 16 anger data_extent . Medan d3 har en funktion för att extrahera datamängden, är det mina preferenser att lagra datainstrumentet i denna variabel.

Linjerna 27 - 38 innehåller magin som sätter upp vårt diagram genom att göra marginaler, knappar, titel och axlar. Dessa är alla dynamiskt bestämda och kan tyckas vara lite komplicerade, så vi kommer att titta på var och en av dem.

make_margins (i make_margins.js)

Vi kan se att marginalobjektet tar hänsyn till ett visst utrymme till vänster, höger, övre och nedre delen av diagrammet (x, vänster, x. höger, y.top, y.bottom respektive), titeln, knapparna och axlarna.

Vi ser också att axlarnas marginaler uppdateras i rad 21.

Varför gör vi det här? Nåväl om vi inte anger antalet fästingar, fästetiketterna fästingsstorleken och teckenstorleken för fästetiketten, kunde vi inte beräkna storleken axlarna behöver. Även då skulle vi fortfarande behöva mäta utrymmet mellan fästetiketter och fästingar. Därför är det lättare att göra några dummy-axlar med våra data, se hur stora motsvarande svg-element är och sedan returnera storleken.

Vi behöver faktiskt bara bredden på y-axeln och höjden på x-axeln, vilket är vad som är lagrat i axes.y och axes.x.

Med våra standardmarginaler, beräknar vi sedan max_drawing_space (rader 29-34 i make_margins.js)

make_buttons (i make_buttons.js)

Funktionen skapar en grupp för alla knappar, och sedan en grupp för varje knapp, som i sin tur lagrar en cirkel och textelement. Linje 37 - 85 beräknar knapparnas placering. Det gör detta genom att se om texten till höger om varje knapps längd är längre än utrymmet som vi kan rita in (rad 75). Om så är fallet släpper den ner en rad och uppdaterar marginalerna.

make_title (i make_title.js)

make_title liknar make_buttons genom att det automatiskt kommer att dela upp titeln på ditt diagram i flera rader och bindestreck om det behövs. Det är lite hackigt eftersom det inte har sofistikeringen i TeXs bindestreck, men det fungerar tillräckligt bra. Om vi behöver fler rader än en uppdateras marginalerna.

Med knapparna, titeln och marginalerna inställda kan vi göra våra axlar.

make_axes (i make_axes.js)

Logiken i make_axes speglar det för att beräkna utrymmet som krävs av dummyaxlarna. Här lägger det emellertid till övergångar för att byta mellan axlar.

Slutligen vår scatter-plot

Med allt det här upplägget gjort kan vi äntligen göra vår spridningsplott. Eftersom våra datasatser kan ha ett annat antal poäng måste vi ta hänsyn till detta och utnyttja d3: s in- och utgångshändelser i enlighet därmed. Att få antalet redan befintliga punkter görs i rad 40. If-satsen i rad 45 - 59 lägger till fler cirkelelement om vi har mer data, eller övergår de extra elementen till ett hörn och tar bort dem om det är för många.

När vi väl vet att vi har rätt antal element kan vi överföra alla de återstående elementen till deras korrekta position (rad 64)

Till sist lägger vi till verktygstips i rad 67 och 68. Verktygstipsfunktionen finns i make_tooltip.js

Box och whisker-diagram

För att visa värdet av att göra generaliserade funktioner som de i föregående exempel (make_title, make_axes, make_buttons, etc), överväg den här rutan och whiskerschema: https://bl.ocks.org/SumNeuron/262e37e2f932cf4b693f241c52a410ff

Medan koden för att göra lådor och whiskers är mer intensiv än att bara placera punkterna, ser vi att samma funktioner fungerar perfekt.

Stapeldiagram

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