DC.js - Wprowadzenie do D3.js
D3.js to biblioteka JavaScript używana do tworzenia interaktywnych wizualizacji w przeglądarce. Biblioteka D3 pozwala nam manipulować elementami strony internetowej w kontekście zbioru danych. Te elementy mogą być elementami HTML, SVG lub Canvas i mogą być wprowadzane, usuwane lub edytowane zgodnie z zawartością zestawu danych. Jest to biblioteka do manipulowania obiektami DOM. D3.js może być cenną pomocą w eksploracji danych. Zapewnia kontrolę nad reprezentacją danych i pozwala dodawać interaktywność danych.
D3.js jest jednym z najlepszych frameworków w porównaniu do innych bibliotek. To dlatego, że; działa w Internecie i wizualizacjach danych oraz jest klasy korporacyjnej. Innym powodem jest jego duża elastyczność, która umożliwia programistom na całym świecie tworzenie wielu zaawansowanych wykresów. W znacznym stopniu rozszerzyło też jego funkcjonalność.
Rozumiemy podstawowe pojęcia D3.js, które są następujące -
- Selections
- Połączenie danych
- SVG
- Transition
- Animation
- Interfejs API D3.js.
Rozumiemy szczegółowo każdą z tych koncepcji.
Wybory
Wybór jest jedną z podstawowych koncepcji D3.js. Opiera się na koncepcji CSS Selector. Ci, którzy używali i znają JQuery, mogą już łatwo zrozumieć wybrane opcje. Pozwala nam wybrać DOM na podstawie selektorów CSS, a następnie zapewnić opcje modyfikacji lub dołączania i usuwania elementów DOM.
Połączenie danych
Łączenie danych to kolejna ważna koncepcja w D3.js. Działa wraz z selekcjami i umożliwia nam manipulowanie dokumentem HTML w odniesieniu do naszego zbioru danych (seria wartości liczbowych). Domyślnie D3.js nadaje zestawowi danych najwyższy priorytet w swoich metodach, a każdy element w zestawie danych odpowiada elementowi HTML.
SVG
SVG oznacza Scalable Vector Graphics. SVG to format grafiki wektorowej oparty na XML. Zapewnia opcje rysowania różnych kształtów, takich jak linie, prostokąty, koła, elipsy itp. Dlatego projektowanie wizualizacji za pomocą SVG zapewnia większą moc i elastyczność.
Transformacja
SVG udostępnia opcje przekształcania pojedynczego elementu kształtu SVG lub grupy elementów SVG. Transformacja SVG obsługuje translację, skalowanie, obracanie i pochylanie.
Przejście
Przejście to proces przechodzenia z jednego stanu do drugiego elementu. D3.js udostępnia metodę przejścia () do wykonania przejścia na stronie HTML.
Animacja
D3.js obsługuje animację poprzez przejście. Animację można wykonać przy odpowiednim użyciu przejścia. Przejścia to ograniczona forma animacji klatek kluczowych z tylko dwiema klatkami kluczowymi:start i end. Początkowa klatka kluczowa to zazwyczaj bieżący stan DOM, a końcowa klatka kluczowa to zestaw atrybutów, stylów i innych właściwości, które określasz. Przejścia dobrze nadają się do przechodzenia do nowego widoku bez skomplikowanego kodu zależnego od widoku początkowego.
Interfejs API D3.js.
Zrozummy w skrócie niektóre z ważnych metod API D3.js.
Kolekcje API
Kolekcja to po prostu obiekt, który grupuje wiele elementów w jedną jednostkę. Jest również nazywany pojemnikiem. Zawiera obiekty, mapy, zestawy i gniazda.
Paths API
Ścieżki służą do rysowania prostokątów, okręgów, elips, polilinii, wielokątów, linii prostych i krzywych. Ścieżki SVG reprezentują kontur kształtu, który można obrysować, wypełnić, użyć jako ścieżki przycinającej lub dowolnej kombinacji wszystkich trzech.
Axis API
D3.js udostępnia funkcje do rysowania osi. Oś składa się z linii, znaczników i etykiet. Oś używa skali, dlatego każdej osi trzeba będzie nadać skalę do pracy.
Zooming API
Powiększanie pomaga skalować zawartość. Możesz skupić się na konkretnym regionie, używając metody „kliknij i przeciągnij”.
Interfejs API wartości oddzielonych ogranicznikami
Separator to sekwencja jednego lub więcej znaków używanych do określenia granicy między oddzielnymi, niezależnymi regionami w postaci zwykłego tekstu lub innych danych. Separator pola to sekwencja wartości oddzielonych przecinkami. W skrócie, wartości rozdzielane ogranicznikami to wartości rozdzielane przecinkami (CSV) lub wartości rozdzielane tabulatorami (TSV).