D3.js - D3.js - Wikipedia

D3.js
Logo D3.svg
VývojářiMike Bostock, Jason Davies, Jeffrey Heer, Vadim Ogievetsky a komunita
První vydání18. února 2011; Před 9 lety (2011-02-18)
Stabilní uvolnění
6.3.1 / 8. prosince 2020; Před 7 dny (2020-12-08)[1]
Úložiště
Upravte to na Wikidata
NapsánoJavaScript
TypVizualizace dat, Knihovna JavaScript
LicenceBSD
webová stránkad3js.org

D3.js (také známý jako D3, zkratka pro Dokumenty založené na datech) je JavaScript knihovna pro vytváření dynamických, interaktivních vizualizace dat v internetové prohlížeče. Využívá to Škálovatelná vektorová grafika (SVG), HTML5, a Kaskádové styly (CSS). Jedná se o nástupce dřívějšího rámce Protovis.[2] Jeho vývoj byl zaznamenán v roce 2011,[3] jako verze 2.0.0 byla vydána v srpnu 2011.[4]

Kontext

Existovaly různé předchozí pokusy o vizualizaci dat do webových prohlížečů. Nejvýznamnějšími příklady byly sady nástrojů Prefuse, Flare a Protovis, které lze považovat za přímé předchůdce souborů D3.js.

Prefuse byla vizualizační sada nástrojů vytvořená v roce 2005, která vyžadovala použití Jáva a vizualizace byly vykresleny v prohlížečích pomocí modulu plug-in Java. Flare byl podobný soubor nástrojů z roku 2007, který se používal ActionScript a pro vykreslení vyžadoval doplněk Flash.

V roce 2009 na základě zkušeností s vývojem a využíváním Prefuse and Flare, Jeff Heer, Mike Bostock a Vadim Ogievetsky z Stanfordská Univerzita Stanfordská vizualizační skupina vytvořila knihovnu JavaScript Protovis pro generování grafiky SVG z dat. Knihovna byla známa odborníkům na vizualizaci dat a akademickým pracovníkům.[5]

V roce 2011 byl zastaven vývoj Protovis zaměřený na nový projekt D3.js. Na základě zkušeností se společností Protovis vyvinul Bostock společně s Heerem a Ogievetskym soubor D3.js, který poskytuje expresivnější rámec, který se současně zaměřuje na webové standardy a poskytuje lepší výkon.[6]

Technické principy

Knihovna D3.js používá předem připravené funkce k výběru prvků, vytváření objektů SVG, jejich stylu nebo přidání přechodů, dynamických efektů nebo popisky jim. Tyto objekty lze také stylovat pomocí CSS. Velké datové sady lze svázat s objekty SVG pomocí funkcí D3.js ke generování textových / grafických grafů a diagramů. Data mohou být v různých formátech, jako jsou JSON, hodnoty oddělené čárkami (CSV) nebo geoJSON, ale v případě potřeby lze zapsat funkce JavaScriptu pro čtení dalších datových formátů.

Výběry

Ústředním principem designu D3.js je umožnit programátorovi, aby nejprve pomocí selektoru stylu CSS vybral danou sadu Model objektu dokumentu Uzly (DOM), pak pomocí operátorů manipulujte s nimi podobným způsobem jako jQuery.[7] Jeden může například vybrat všechny HTML <p>...</p> prvky a poté změnit jejich barvu textu, např. na levanduli:

 d3.vybrat vše(„p“)                 // vybrat všechny 
 prvky   .styl("barva", "levandule")     // nastavit styl „barva“ na hodnotu „levandule“   .attr("třída", "čtverce")       // nastavit atribut „třída“ na hodnotu „čtverce“   .attr("X", 50);                 // nastavit atribut „x“ (vodorovná poloha) na hodnotu 50px

Výběr může být založen na značce HTML, třídě, identifikátoru, atributu nebo místě v hierarchii. Jakmile jsou prvky vybrány, lze na ně aplikovat operace. To zahrnuje získávání a nastavování atributů, zobrazovaných textů a stylů (jako ve výše uvedeném příkladu). Lze také přidávat a odebírat prvky. Tento proces úprav, vytváření a odebírání prvků HTML lze učinit závislým na datech, což je základní koncept D3.js.

Přechody

Deklarováním přechodu lze hodnoty atributů a stylů plynule interpolovat po určitou dobu. Následující kód vytvoří všechny HTML <p>...</p> prvky na stránce postupně mění barvu textu na růžovou:

 d3.vybrat vše(„p“)             // vybrat všechny 
 prvky   .přechod(„trans_1“)      // přechod s názvem „trans_1“     .zpoždění(0)                 // přechod začínající 0ms po spuštění     .doba trvání(500)            // přechod na 500ms     .ulehčit(d3.snadnost lineární)           // progrese uvolnění přechodu je lineární ...   .styl("barva", "růžový");    // ... do barvy: růžová

Vazba dat

Pro pokročilejší použití načítaná data řídí vytváření prvků. D3.js načte danou datovou sadu a poté pro každý z jejích prvků vytvoří objekt SVG s přidruženými vlastnostmi (tvar, barvy, hodnoty) a chováním (přechody, události).[8][9][10]

// Data  var země Data = [     { název:"Irsko",  příjem:53000, život: 78, pop:6378, barva: "Černá"},     { název:"Norsko",   příjem:73000, život: 87, pop:5084, barva: "modrý" },     { název:„Tanzanie“, příjem:27000, život: 50, pop:3407, barva: "Šedá" }  ];// Vytvořit SVG kontejner  var svg = d3.vybrat("#háček").připojit(„svg“)        .attr("šířka", 120)        .attr("výška", 120)        .styl("barva pozadí", „# D0D0D0“);// Vytvořit SVG prvky z dat     svg.vybrat vše("kruh")                  // vytvoření šablony virtuálního kruhu      .data(země Data)                   // svázat data       .připojit se("kruh")                                 // připojí data k výběru a vytvoří elementy kruhu pro jednotlivá data        .attr(„id“, funkce(d) { vrátit se d.název })            // nastavit ID kruhu podle názvu země        .attr("cx", funkce(d) { vrátit se d.příjem / 1000  })  // nastavit vodorovnou polohu kruhu podle příjmu         .attr("cy", funkce(d) { vrátit se d.život })            // nastavíme svislou polohu kruhu podle očekávané délky života         .attr(„r“,  funkce(d) { vrátit se d.pop / 1000 *2 })   // nastavit poloměr kruhu podle počtu obyvatel země         .attr("vyplnit", funkce(d) { vrátit se d.barva });        // nastaví barvu kruhu podle barvy země

Generovaná grafika SVG je navržena podle poskytnutých údajů.

Připojování uzlů pomocí dat

Jakmile je datová sada vázána na dokument, použití D3.js obvykle následuje vzor, ​​kde je explicitní .enter () funkce, implicitní „aktualizace“ a explicitní .výstup() funkce je vyvolána pro každou položku ve vázané datové sadě. Žádný metody zřetězené po .enter () bude vyvolán příkaz pro každou položku v datové sadě, která již není ve výběru reprezentována uzlem DOM (předchozí vybrat vše()). Podobně je funkce implicitní aktualizace volána na všech existujících vybraných uzlech, pro které existuje odpovídající položka v datové sadě, a .výstup() je volána na všech existujících vybraných uzlech, které nemají v datové sadě položku, která by se k nim mohla vázat. Dokumentace D3.js poskytuje několik příkladů, jak to funguje.[11]

Struktura API

D3.js API obsahuje několik stovek funkcí a lze je seskupit do následujících logických jednotek:[12]

  • Výběry
  • Přechody
  • Pole
  • Matematika
  • Barva
  • Váhy
  • SVG
  • Čas
  • Rozvržení
  • Zeměpis
  • Geometrie
  • Chování

Matematika

Pole

Operace pole D3.js jsou postaveny tak, aby doplňovaly stávající podporu pole v JavaScriptu (metody mutátoru: třídění, obrácení, spojování, posouvání a rušení; přístupové metody: concat, join, slice, indexOf a lastIndexOf; metody iterace: filtr, každý, forEach, mapa, některé, zmenšovat a zmenšovat). D3.js rozšiřuje tuto funkcionalitu o:

  • Funkce pro nalezení minima, maxima, rozsahu, součtu, průměru, mediánu a kvantilu pole.
  • Funkce pro řazení, míchání, permutování, slučování a půlení polí.
  • Funkce pro vnoření polí.
  • Funkce pro manipulaci s asociativními poli.
  • Podpora sbírek map a sad.

Geometrie

Barva

  • Podpora pro RGB, HSL, HCL, a Laboratoř* barevné znázornění.
  • Rozjasnění, ztmavení a interpolace barev.

Reference

  1. ^ „zprávy d3“. Github.com.
  2. ^ „Pro uživatele Protovis“, Mbostock.github.com, vyvoláno 18. srpna 2012
  3. ^ Myatt, Glenn J .; Johnson, Wayne P. (září 2011), „5.10 Další čtení“, Making Sense of Data III: Praktický průvodce návrhem interaktivních vizualizací dat, Hoboken, New Jersey: John Wiley & Sons, str. A – 2, ISBN  978-0-470-53649-0, vyvoláno 23. ledna 2013
  4. ^ "Poznámky k vydání", D3.js, vyvoláno 22. srpna 2012
  5. ^ Akademický příklad: Savva, Manolis; Kong, Nicholas; Chhajta, Arti; Li, Feifei; Agrawala, Maneesh; Heer, Jeffrey (2011), „ReVision: Automated Classification, Analysisand Redesign of Chart Images“, Software a technologie uživatelského rozhraní ACM, vyvoláno 23. ledna 2013
  6. ^ Bostock, Ogievetsky & Heer 2011
  7. ^ Bostock, Ogievetsky & Heer 2011, kap. 3
  8. ^ Bostock, Mike (5. února 2012), Myšlení s Joins
  9. ^ „Pero od Lopeze Huga“. Codepen.io. Archivovány od originál dne 22. března 2016. Citováno 1. srpna 2016.
  10. ^ „Upravit housle“. JSFiddle.net. Citováno 1. srpna 2016.
  11. ^ „Tři malé kruhy“. Mbostock.github.io. Citováno 1. srpna 2016.
  12. ^ d3 (30. června 2016). „Reference API · d3 / d3 Wiki · GitHub“. Github.com. Citováno 1. srpna 2016.

Další čtení

Základní informace o samotném D3.js.
Používání D3.js - úroveň pro začátečníky
Používání D3.js - střední úroveň
Ostatní
Videa

Související projekty

externí odkazy