Menu

Funkcje API D3.js - samouczek z przykładami

d3 js api functions tutorial with examples

Wypróbuj Nasz Instrument Do Eliminowania Problemów

Ten samouczek wyjaśnia różne funkcje API D3.js w celu dodania funkcji, takich jak wiązanie danych, łączenie, ładowanie i analizowanie danych, interpolacja itp.

D3.js to biblioteka do wizualizacji danych JavaScript typu open source, która obejmuje różne funkcje API, które dodają ekscytujące funkcje, takie jak wiązanie danych, łączenie, ładowanie i analizowanie danych zewnętrznych w formacie CSV, XML i JSON, manipulowanie liczbami losowymi, interpolacją i tekstem formatowanie i internacjonalizacja wraz z różnymi funkcjami, takimi jak animacja, przejście i tworzenie wykresów do wizualizacji danych.

przykładem wymagania funkcjonalnego jest _________

Możesz zapoznać się z naszymi wcześniejszymi samouczkami na ten temat seria d3 aby dowiedzieć się więcej o jego funkcjach, zaletach i wymaganiach wstępnych.

Funkcje API w D3.js

Czego się nauczysz:

Powiązanie danych z D3.js

Aby stworzyć wizualizację danych, taką jak wykresy i wykresy, wymagane jest powiązanie lub połączenie danych z elementem DOM.

Dane mogą być tablicą, która jest kontenerem zawierającym wartości liczbowe tego samego typu, jak pokazano poniżej.

var data = (59.5, 17.2, 9.6, 7.6, 5.5, 0.5)

Pierwszym krokiem będzie utworzenie obiektu SVG, aby mieć płaszczyznę lub strukturę do budowania wizualizacji danych zewnętrznych, element HTML jest wybierany za pomocą d3.select () i dołącza SVG, który działa jak płótno, dodając atrybuty takie jak szerokość i wysokość płótna.

var svg = d3.select(HTML element like body or div) .attr(width, value from variable for width) .attr(height, value from variable for height)

Następnym krokiem jest wstawienie elementu SVG „g”, który działa jak grupa zawierająca inne elementy SVG.

svg.selectAll ('g')

Ponadto powiąż lub połącz dane z tym kształtem SVG dołączonym do płótna, używając funkcji .data (data).

svg.selectAll ('g').data(data)

Kolejnym krokiem jest powiązanie danych z elementami DOM za pomocą metody .enter () z funkcją .data (data).

svg.selectAll ('g').data(data).enter()

Następnie dołącz kształt SVG, abyśmy mogli dołączyć kształt do płótna.

svg.selectAll ('g') . data(data).enter().append('g')

Poniżej podano przykład powiązania danych.

var infoset = (59.5, 17.2, 9.6, 7.6, 5.5, 0.5) var span = 500, ceil = 500; var scalespan = d3.scaleLinear() .domain((0, d3.max(infoset))) .range((0, 400)); var screen = d3.select('body').append('svg') .attr('width', span) .attr('height', ceil) .append('g').attr('transform', 'translate(5,20)'); var rule = screen.selectAll('rect') .data(infoset).enter() .append('rect') .attr('width', function(d){ return scalespan(d);}) .attr('height', 20) .attr('y', function(d, i){ return i*25; }) .attr('fill', '#b3ccff'); screen.selectAll('text') .data(infoset).enter().append('text') .attr('y', function(d, i){ return i*25; }) .attr('x', function(d){ return scalespan(d);}) .text(function(d) {return d;}) .attr('fill', 'blue').attr('dy','.85em'); Łączenie, ładowanie i analizowanie danych w D3.js
Dane wyjściowe są przechwytywane w formie graficznej współrzędnych z powiązaniem danych

W celu powiązania danych, którymi w naszym przypadku jest gęstość zaludnienia kontynentu

var infoset = (59,5, 17,2, 9,6, 7,6, 5,5, 0,5)

Zmienny ekran jest przypisywany do obszaru rysowania poprzez dołączenie kształtu SVG do elementu html, którym w naszym przypadku jest body.

Zmienna rozpiętość skali przyjmuje funkcję scaleLinear () z parametrami dziedziny i zakresu w celu wykreślenia wykresu w celu wyświetlenia wartości na skali w formacie graficznym.

.data (infoset) .enter () pomoże w powiązaniu naszego zbioru danych przypisanego do zmiennej Infoset.

Tekst jest dodawany w celu wykreślenia wartości z prostokątami o różnej długości, odpowiadającymi ich wartościom w zbiorze danych.

Łączenie, ładowanie i analizowanie danych w D3.js.

D3.js może ładować dane zewnętrzne lub lokalnie w zmiennych z różnych typów plików i wiązać te dane z elementami DOM.

Różne formaty danych to CSV, JSON, TSV i XML, natomiast d3.csv (), d3.JSON (), d3.tsv () i d3.xml () to odpowiednie metody służące do ładowania plików danych w różnych formatów ze źródeł zewnętrznych, wysyłając żądanie http na podany adres URL w celu załadowania plików lub danych odpowiednich formatów, a także wykonania funkcji wywołania zwrotnego z przeanalizowanymi odpowiednimi obiektami danych.

domyślne ustawienie regionalne
Dane zewnętrzne w różnych formatach mogą być wyświetlane, jak pokazano powyżej

Składnia ładowania pliku danych CSV jest podana poniżej.

d3.csv (url (, row, callback));

# 1) Pierwszy parametr url powyżej to adres URL lub ścieżka serwera do pliku csv, który jest plikiem zewnętrznym ładowanym przez funkcję d3.csv. w naszym przypadku tak

http: // localhost: 8080 / examples / movie_published.csv

#dwa) Drugi parametr jest opcjonalny

# 3) Trzecim parametrem jest Callback, czyli funkcja, którą można przekazać jako argument przez inną funkcję, zapewniając wykonanie określonego kodu, dopóki inny kod nie zakończy wykonywania dla formatów JSON, TSV i XML pliku, funkcja d3.csv jest zastąpione odpowiednio przez d3.json, d3.tsv i d3.xml.

Poniżej podano przykład analizy danych zewnętrznych.

d3.csv('movie_published.csv', function(data) { console.log(data); });
d3.csv () załaduje plik CSV, jak pokazano powyżej.

Po otwarciu w przeglądarce Google Chrome kliknij F12, a odświeżenie strony wyświetli log konsoli z kodu, którym w naszym przypadku jest console.log (dane), który wyświetli wartości ze zbioru danych, z nagłówkami kolumn, nazwa_filmu i rok być wyświetlane z pliku CSV przechowywanego w lokalizacji serwera.

Manipulowanie liczbami losowymi w D3.js

d3 - losowe metody API zwracają liczby losowe z różnych rozkładów prawdopodobieństwa, co jest funkcją matematyczną obliczającą szanse wystąpienia różnych możliwych wyników.

Te funkcje używają głównie funkcji Math. losowa funkcja JavaScript, która generuje liczby mieszczące się między minimalną a maksymalną liczbą z określonego zakresu, daje w wyniku unikalną liczbę za każdym razem, gdy Math. funkcja losowa zostaje wykonana.

  • d3.randomUniform - Generuj liczby losowe z jednolitego rozkładu. Na przykład. d3.randomUniform (1, 2) () - zwróci liczby losowe zawierające 1 i mniejsze niż 2.
  • d3.randomNormal - Generuj liczby losowe z rozkładu normalnego, Na przykład. d3.randomNormal (1, 2) () - zwróci liczbę całkowitą znajdującą się między określoną wartością minimalną a maksymalną.
  • d3.randomLogNormal - Wygeneruj liczby losowe z rozkładu logarytmiczno-normalnego, a wartość oczekiwana będzie logarytmem naturalnym dla zmiennej losowej.
  • d3.randomBates - Generuj liczby losowe z rozkładu Batesa ze zmiennymi niezależnymi.
  • d3.randomIrwinHall - Generowanie liczb losowych z rozkładu Irwina – Halla.
  • d3.randomExponential - Generuj liczby losowe z rozkładu wykładniczego.

Przykład funkcji losowych w d3

Random Functions in d3

Random Functions in d3

document.write(d3.randomUniform(1, 2)() +'

'); document.write(d3.randomNormal(1, 2)()+'

'); document.write(d3.randomLogNormal(1, 2)()+'

'); document.write(d3.randomBates(1, 2)()+'

'); document.write(d3.randomIrwinHall(1, 2)()+'

'); document.write(d3.randomExponential(1, 2)()+'

');

Wyświetlane są wyniki losowych metod d3

Interpolacja w D3.js

Metody API stosowane do interpolacji między dwiema losowymi wartościami będą zależeć od typu wartości końcowej b, składnia ogólna to d3.interpolate (a, b). Poniższa tabela zawiera listę typów danych o wartości końcowej b oraz odpowiednią metodę lub funkcję, która będzie się zmieniać zgodnie z typem danych.

Rodzaj wartości końcowej bUżyta nazwa metody
Jeśli b jest tablicą ogólnąinterpolateArray ()
Jeśli b jest Boolean, null lub undefinedZostanie użyta stała b
Jeśli b jest liczbąinterpolateNumber ()
Jeśli b to kolor lub ciąg odnoszący się do koloruinterpolateRgb ()
Jeśli b jest datąinterpolateDate ()
Jeśli b jest łańcucheminterpolateString ()
Jeśli b jest wpisaną tablicą liczbinterpolateNumberArray ()
Jeśli b odnosi się do numeruinterpolateNumber ()
InaczejinterpolateObject ()

Poniższy przykład wyjaśnia:

  • Funkcja d3.interpolateNumber () z 10 jako wartością początkową i końcową jako 20, wyświetlane wartości mieszczą się w zakresie od wartości początkowej 10 do wartości końcowej 20 dla interpolacji parametrów od (0,0) do (0,5) do (1,0)
  • Funkcja d3.interpolateRgb () dla dwóch różnych nazw kolorów, które w rezultacie dają odpowiednie wartości rgb („r”, „g”, „b”) dla interpolacji parametrów od (0,0) do (0,5) do (1,0)
  • Funkcja d3.interpolateDate () dla dwóch różnych dat w formacie „rrrr-mm-dd gg: mm: ss” wyświetli daty między powyższym zakresem dat, dla interpolacji parametrów od (0,0) do (1,0)

Poniżej przedstawiono przykład interpolacji liczb, kolorów i dat między zakresem.

Interpolate Numbers, Colors and Dates

var inpolat = d3.interpolateNumber(99,100); document.write(inpolat(0.0) + '

'); document.write(inpolat(0.2)+ '

'); document.write(inpolat(0.5) + '

'); document.write(inpolat(1.0)+ '

'); var inpolcolrs = d3.interpolateRgb('yellow', 'aquamarine'); document.write(inpolcolrs(0.0)+ '

'); document.write(inpolcolrs(0.2)+ '

'); document.write(inpolcolrs(0.5)+ '

'); document.write(inpolcolrs(0.8)+ '

'); document.write(inpolcolrs(1.0)+ '

'); var inpoldates = d3.interpolateDate(new Date('2020-01-01 00:00:00'), new Date('2020-01-15 23:59:59')); document.write(inpoldates(0.0)+ '

'); document.write(inpoldates(0.2)+ '

'); document.write(inpoldates(0.5)+ '

'); document.write(inpoldates(0.8)+ '

'); document.write(inpoldates(1.0)+ '

');

Interpolacja w D3.js dla liczb i kolorów

Formatowanie tekstu i internacjonalizacja za pomocą D3.js

Formatowanie tekstu i lokalizację można osiągnąć w D3.js za pomocą formatu liczb, formatu daty i funkcji regionalnych, jak wyjaśniono poniżej z przykładami.

D3 - lokalny ()

d3.locale (definicja), zwróci ustawienia regionalne specyficzne dla definicji, domyślnie definicja ustawień regionalnych to angielski (USA) dla d3.locale (definicja),

jakie są błędy w oprogramowaniu komputerowym?

Poniżej wymieniono właściwości formatowania liczb dla definicji ustawień regionalnych.

  • dziesiętny: Przecinek dziesiętny jest zwykle stosowany w walutach takich jak 25,75 ( Na przykład. „.”).
  • tysiące: Tysiąc to identyfikator lub separator, który jest używany jako przecinek po tysiącu wartości, takich jak 2,475 ( Na przykład. „,”).
  • grupowanie: Grupę tablicy dla każdej grupy i rozmiar można sprawdzić za pomocą Arrayname (5), gdzie 5 to indeks, a rozmiar tablicy to 6 elementów.
  • waluta: Prefiks i sufiks dla ciągów walutowych ( Na przykład. ('$', '')).
  • dateTime: Format daty i godziny (% c) będzie zawierał datę i godzinę ( Na przykład. „% A% b% e% X% Y”).
  • data: Data (% x) ( Na przykład. „% M /% d /% Y”) w formacie dzień miesiąca i rok.
  • czas: Czas (% X) ( Na przykład. „% H:% M:% S”) ciąg formatu w godzinach, minutach i sekundach.
  • okresy: Lokalna godzina przed południem i P.M. odpowiedniki ( Na przykład. („AM”, „PM”)).
  • dni: Dni tygodnia zaczynające się od niedzieli, zapisane alfabetami.
  • shortDays: Krótkie dni lub skrócone nazwy, takie jak SUN, MON itp. Dni tygodnia, począwszy od niedzieli.
  • miesięcy: Pełne nazwy miesiąca w październiku (począwszy od stycznia).
  • shortMonths: Krótkie miesiące lub skrócone nazwy, takie jak JAN, FEB, MAR itp. Miesięcy (począwszy od stycznia).

Wszystkie parametry wyjaśnione powyżej są wyświetlane jako zmienne z ich odpowiednimi wartościami na poniższym obrazku.

Domyślne ustawienia regionalne to en_US, rosyjskie (ru_RU) mają stałe Data, Czas i Interwał.

D3.format

d3.format z biblioteki JavaScript przyjmuje liczbę jako argument wejściowy, składnia to d3.format (specyfikator), w celu przekształcenia liczb używany jest d3.format.

Przykład zastosowania formatu opartego na d3 podano poniżej.

Formatting for currency body {padding: 50px; font: 16px Courier;} p { color:blue; font-size: 16px; font-weight: bold;} var body = d3.select('body'); var comafmt = d3.format(','), decimalfmt = d3.format('.1f'), comadecimalfmt = d3.format(',.2f'), suffixfmt = d3.format('s'), suffixfmtDecimal1 = d3.format('.1s'), suffixfmtDecimal2 = d3.format('.2s'), rupiemoneyfmt = function(d) { return 'Rs ' + comadecimalfmt(d); }, intmoneyfmt = function(d) { return '$ ' + comadecimalfmt(d); }, euromoneyfmt= function(d) { return '€ ' + comadecimalfmt(d); }, percentfmt = d3.format(',.2%'); var number = 27500; body.append('p').text('Number used for formatting is : ' + number).style('font-weight', 'bold'); body.append('p').text(function() { return 'Indian Rupee format of above Number : ' + rupiemoneyfmt(number); }); body.append('p').text(function() { return 'International Currency format will be : ' + intmoneyfmt(number); }); body.append('p').text(function() { return 'Euro Currency format will be : ' + euromoneyfmt(number); }); body.append('p').text(function() { return 'Percent format : ' + percentfmt(number); }); body.append('p').text(function() { return 'Suffix for large number : ' + suffixfmt(number); }); body.append('p').text(function() { return 'Round off ceil number: ' + suffixfmtDecimal1(number); }); body.append('p').text(function() { return 'Round off floor number : ' + suffixfmtDecimal2(number); }); body.append('p').text(function() { return 'Comma for large number: ' + comafmt(number); }); body.append('p').text(function() { return 'One decimal format : ' + decimalfmt(number); }); body.append('p').text(function() { return 'Two decimal format : ' + comadecimalfmt(number); });
Formatowanie zastosowane dla liczb i walut przy użyciu formatu d3.format

Modyfikowanie za pomocą formatów dat w D3.js

Formatowanie czasu za pomocą biblioteki D3.js, gdzie d3.timeParse można zastosować za pomocą symboli wieloznacznych, czyli wyrażeń regularnych, które pomagają przekonwertować wejściowy format czasu na żądany format.

Przykład formatu związanego z czasem i datą podano poniżej.

body {font-family: Arial, Helvetica, sans-serif; color: blue;} var datetimefmt = d3.timeFormat('%d-%m-%Y %H:%M:%S %p'); document.write(datetimefmt(new Date()) +'

'); var timePortion = d3.timeFormat('%H:%M:%S %p'); document.write(timePortion(new Date()) +'

'); var datePortion = d3.timeFormat('%B %d, %Y'); document.write(datePortion(new Date())+'

'); var datefmt = d3.timeFormat(' %d'); document.write(datefmt(new Date())+'

'); var dayfmt = d3.timeFormat('%A '); document.write(dayfmt(new Date())+'

'); var monfmt = d3.timeFormat('%B'); document.write(monfmt(new Date()) +'

');

Wyjaśnienie formatu daty i czasu

Wniosek

W tym samouczku omówiliśmy wszystkie pozostałe podstawowe metody D3.js, takie jak wiązanie danych, w którym dane w postaci tablicy i łączenia, ładowania i analizowania danych są w formacie CSV, JSON i XML.

Omówiliśmy również manipulowanie przy użyciu liczb losowych i metody interpolacji w celu wizualizacji grup danych na wykresach lub wykresach oraz formatowania tekstu i lokalizacji przy użyciu metod d3.locale dla liczb, daty, godziny i różnych walut lokalnych.

rekomendowane lektury

^