logo

Vytvořte jednoduchý graf s D3js

Dnes jsem se tedy dozvěděl o D3 nejflexibilnějším javascriptu pro vizualizaci dat, když jsem tuto knihovnu zkoušel, byla trochu zahlcující a nevím, jak nejefektivněji se to naučit, protože dokumentace byla dost špatná. Chci říct, že pořadí tutoriálu nebylo dobře strukturováno.

Proč se to musím naučit?

V současné době pracuji na projektu, který potřebuje vizualizaci dat, samozřejmě souvisí s webovou aplikací dashboard. Měl jsem v úmyslu zvládnout tuto knihovnu, když jsem pracoval na podobném projektu.

Účelem tohoto článku je poskytnout rychlého průvodce, jak vizualizovat data pomocí D3.js

Příprava

Nastavení prostředí

Než se s touto knihovnou začneme zabývat a napíšeme pár řádků kódu, musíte si tuto knihovnu nainstalovat, prozatím vás naučím snadný způsob, jak to udělat.

  1. Navštivte a stáhněte si D3.js z oficiálních stránek, protože stažený soubor je .zip formátu, musíte jej také rozbalit.
  2. Vytvořte adresář, do kterého umístíte soubory, které jste používali pro učení. např. d3-playground uvnitř mého adresáře (viz níže).
  .
  ├── index.html
  └── public
  ├── css
  │   └── app.css
  └── js
      ├── API.md
      ├── app.js
      ├── CHANGES.md
      ├── d3.js
      ├── d3.min.js
      ├── LICENSE
      └── README.md

  3 directories, 9 files
  1. Načíst d3.min.js a app.js soubor do vašeho index.html
  2. Navíc můžete globálně nainstalovat živý server pomocí příkazu níže.
$ npm install -g live-server
  1. Otevřete svůj oblíbený editor kódu, osobně jsem použil vim . A jsme připraveni kódovat!.

Dám vám velmi jednoduchý příklad spíše než příklad základního příkazu, jak to udělat a tak.

Vytvořte graf pomocí D3.js

Cíl (Vytvořit graf se strukturovaným kódem HTML, jak je uvedeno níže)

Zde je struktura HTML kódu a ukázkový graf. Tento graf píšu ručně, ale chci jej vytvořit automaticky pomocí D3.js 

<div id="chart">
  <span style="background-color: rgb(35, 35, 35); color: white; font-weight: bold; display: block; text-align: right; height: 20px; margin: 1px; padding: 10px; width: 40px;">4</span>
  <span style="background-color: rgb(35, 35, 35); color: white; font-weight: bold; display: block; text-align: right; height: 20px; margin: 1px; padding: 10px; width: 80px;">8</span>
  <span style="background-color: rgb(35, 35, 35); color: white; font-weight: bold; display: block; text-align: right; height: 20px; margin: 1px; padding: 10px; width: 150px;">15</span>
  <span style="background-color: rgb(35, 35, 35); color: white; font-weight: bold; display: block; text-align: right; height: 20px; margin: 1px; padding: 10px; width: 160px;">16</span>
  <span style="background-color: rgb(35, 35, 35); color: white; font-weight: bold; display: block; text-align: right; height: 20px; margin: 1px; padding: 10px; width: 230px;">23</span>
  <span style="background-color: rgb(35, 35, 35); color: white; font-weight: bold; display: block; text-align: right; height: 20px; margin: 1px; padding: 10px; width: 460px;">46</span>
</div>

Příklad grafu

Implementujte D3.js a vytvořte vzorový graf

Uvnitř index.html 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>D3 Playground - Chart</title>
</head>
<body>
 <div id="app">
   <div id="chart"></div>
 </div> 
 <script src="public/js/d3.min.js"></script>
 <script src="public/js/app.js"></script>
</body>
</html>

Vytvořil jsem falešná data pole, jak je uvedeno níže. Napište to do svého souboru app.js 

// Data to visualize
const data = [ 4, 8, 15, 16, 23, 46 ];

Výběr prvku

Pak udělám <div id="chart"> jako kontejner, co musím udělat, je vybrat prvek. 

const chart = d3.select('#chart')

Vytvořit prázdný rozsah

Vytvořte prázdný prvek span, nazval jsem to prvky init. 

// create empty span element.
const bar = d3.selectAll('span')

Data vazby a prvek stylu

Zde začínáme vázat data s našimi init elementy. a připojte se k našemu span živel. .join() metoda je zde nová pro více konvencí při spojování dat. 

// binding data to <span>
bar.data(data)
   .join('span')
      // styling span element.
      .style('background-color', '#232323')
      .style('color', 'white')
      .style('font-weight', 'bold')
      .style('display', 'block')
      .style('text-align', 'right')
      .style('height', '20px')
      .style('margin', '1px')
      .style('padding', '10px')
      // computed the width of each element depends on the data value, to do it see below.
      .style('width', d => `${d * 10}px`)
      // append text inside element
      .text(d => d);
Element stylingu (základní syntaxe)

Vím, možná už chápete, jak styling elementu, ale přesto vám dám základní příklad syntaxe. 

// first argument = key
// second argument = value
element.style('background-color', '#232323');

Řetězení style metoda. Pokud chcete styling prvku upravit více než jedno pravidlo CSS jednou, možná budete muset zřetězení style metoda. 

element.style('background-color', '#232323')
    .style('font-weight', 'bold')
    .style('padding', '10px')
    .style('color', 'white');

Díky, uvidíme se u dalšího článku.

Původní příspěvek:Nurofsun's Blog