d3.js
Tworzenie solidnego, responsywnego i wielokrotnego użytku (r3) dla d3

Wprowadzenie

Wykres punktowy

Ten przykład zawiera łącznie ponad 1000 wierszy kodu (zbyt wiele, aby można je tutaj osadzić). Z tego powodu cały kod jest dostępny na http://blockbuilder.org/SumNeuron/956772481d4e625eec9a59fdb9fbe5b2 (alternatywnie hostowany pod adresem https://bl.ocks.org/SumNeuron/956772481d4e625eec9a59fdb9fbe5b2) . Uwaga: bl.ocks.org używa iframe, więc aby zobaczyć zmianę rozmiaru, musisz kliknąć przycisk otwarty (prawy dolny róg iframe). Ponieważ kodu jest dużo, został on podzielony na wiele plików, a odpowiedni segment kodu będzie oznaczony zarówno nazwą pliku, jak i numerem wiersza. Otwórz ten przykład, gdy go przejdziemy.

Co sprawia, że wykres?

Istnieje kilka podstawowych elementów, które można znaleźć w dowolnym pełnym wykresie; mianowicie obejmują one:

• tytuł
• osie
• etykiety osi
• dane

Istnieją inne aspekty, które mogą być uwzględnione w zależności od wykresu - np. Legenda wykresu. Jednak wiele z tych elementów można obejść za pomocą podpowiedzi. Z tego powodu istnieją interaktywne elementy specyficzne dla wykresów - np. Przyciski do przełączania między danymi.

Ponieważ zawartość naszego wykresu będzie interaktywna, właściwe byłoby, aby sam wykres był dynamiczny - np. Zmienił rozmiar, gdy zmienia się rozmiar okna. SVG jest skalowalny, więc możesz po prostu skalować wykres, zachowując aktualną perspektywę. Jednak w zależności od ustawionej perspektywy wykres może stać się zbyt mały, aby można go było odczytać, nawet jeśli jest jeszcze wystarczająco dużo miejsca na wykresie (np. Jeśli szerokość jest większa niż wysokość). Dlatego może być wskazane przerysowanie wykresu w pozostałym rozmiarze.

Ten przykład obejmie sposób dynamicznego obliczania położenia przycisków, tytułu, osi, etykiet osi, a także obsługi zestawów danych dla różnych ilości danych

Ustawiać

Konfiguracja

Ponieważ naszym celem jest ponowne użycie kodu, powinniśmy utworzyć plik konfiguracyjny, który będzie zawierał globalne opcje aspektów naszego wykresu. Przykładem takiego pliku konfiguracyjnego jest charts_configuration.json .

Jeśli spojrzymy na ten plik, zobaczymy, że zawarłem kilka elementów, które powinny już mieć wyraźne zastosowanie podczas tworzenia naszego wykresu:

• pliki (przechowuje ciąg, w którym przechowywane są nasze dane wykresu)
• status_dokumentu (który przycisk jest obecnie wybrany dla naszego wykresu)
• chart_ids (identyfikatory html dla wykresów, które stworzymy)
• svg (opcje dla svg, np. rozmiar)
• atrybuty działki
  • tytuł (ustaw różne atrybuty czcionki)
  • podpowiedź (ustaw różne właściwości stylu podpowiedzi)
  • osie (ustaw różne atrybuty czcionek)
  • przyciski (ustaw różne atrybuty czcionki i stylu)
• działki
  • scatter (ustaw różne aspekty naszego wykresu rozrzutu, np. promień punktu)
• kolory (konkretna paleta kolorów do użycia)

Funkcje pomocnicze

Oprócz skonfigurowania tych globalnych aspektów musimy zdefiniować niektóre funkcje pomocnicze. Można je znaleźć pod helpers.js

• ajax_json (ładuj pliki json synchronicznie lub asynchronicznie)
• keys (zwraca klucze danego obiektu - odpowiednik d3.keys ())
• parseNumber (ogólna parseNumber liczby w przypadku, gdy nie wiemy, jaki jest typ lub liczba)
• typeofNumber (zwraca typ liczby)

index.html

Na koniec powinniśmy skonfigurować nasz plik HTML. Na potrzeby tego przykładu umieścimy nasz wykres w znaczniku section którym id zgodny z id podanym w pliku konfiguracyjnym (linia 37). Ponieważ wartości procentowe działają tylko wtedy, gdy można je obliczyć na podstawie ich elementu nadrzędnego, uwzględniamy również podstawowe stylizacje (linie 19–35)

Robimy nasz wykres rozproszenia

Otwórzmy make_scatter_chart.js . Teraz zwróćmy uwagę na wiersz 2, w którym wiele najważniejszych zmiennych jest predefiniowanych:

• svg - wybór svg wykresu przez d3
• chart_group - d3 wybór grupy wewnątrz svg, w której zostaną umieszczone dane
• płótno - podstawowe aspekty wyciągu svg dla wygody
• marginesy - marginesy, które musimy wziąć pod uwagę
• maxi_draw_space największe wartości xiy, w których możemy rysować nasze dane
• doc_state - bieżący stan dokumentu, jeśli używamy przycisków (w tym przykładzie jesteśmy)

Być może zauważyłeś, że nie umieściliśmy pliku svg w pliku HTML. Dlatego zanim będziemy mogli cokolwiek zrobić z naszym wykresem, musimy dodać plik svg do index.html jeśli jeszcze nie istnieje. Osiąga się to w pliku make_svg.js funkcją make_chart_svg . Patrząc na make_svg.js , widzimy, że używamy funkcji pomocniczej parseNumber w konfiguracji wykresu dla szerokości i wysokości svg. Jeśli liczba jest liczbą zmiennoprzecinkową, szerokość i wysokość svg są proporcjonalne do szerokości i wysokości przekroju. Jeśli liczba jest liczbą całkowitą, po prostu ustawi ją na te liczby całkowite.

Linie od 6 do 11 sprawdzają, czy - w efekcie - jest to pierwsze wywołanie, czy też nie, i ustawia grupę chart_group (i dokumentuje stan, jeśli jest to pierwsze wywołanie).

Linia 14-15 wyodrębnia aktualnie wybrane dane klikniętym przyciskiem; wiersz 16 ustawia data_extent . Natomiast d3 ma funkcję ekstrakcji zakres danych, to jest moja preferencja do przechowywania danych w zakres tej zmiennej.

Linie 27–38 zawierają magię, która tworzy nasz wykres, tworząc marginesy, przyciski, tytuł i osie. Wszystkie są określone dynamicznie i mogą wydawać się nieco skomplikowane, więc przyjrzymy się każdemu z nich po kolei.

make_margins (w make_margins.js)

Widzimy, że obiekt marginesów uwzględnia trochę miejsca po lewej, prawej, górnej i dolnej części wykresu (odpowiednio x. Lewy, x. Prawy, y. Górny, y. Dolny), tytuł, przyciski i osie.

Widzimy również, że marginesy osi są aktualizowane w linii 21.

Dlaczego to robimy? No cóż, chyba że określimy liczbę tyknięć, tyknięcie oznacza rozmiar tyknięcia i rozmiar czcionki etykiety tyknięcia, nie moglibyśmy obliczyć rozmiaru, którego potrzebują osie. Nawet wtedy nadal musielibyśmy oszacować przestrzeń między etykietami kleszczy a kleszczami. Dlatego łatwiej jest zrobić niektóre atrapy osi przy użyciu naszych danych, zobaczyć, jak duże są odpowiednie elementy svg, a następnie zwrócić rozmiar.

W rzeczywistości potrzebujemy tylko szerokości osi y i wysokości osi x, która jest przechowywana w axes.y i axes.x.

Po ustawieniu domyślnych marginesów obliczamy następnie max_drawing_space (linie 29-34 w make_margins.js)

make_buttons (w make_buttons.js)

Funkcja tworzy grupę dla wszystkich przycisków, a następnie grupę dla każdego przycisku, która z kolei przechowuje okrąg i element tekstowy. Linia 37 - 85 oblicza pozycję przycisków. Robi to, sprawdzając, czy tekst po prawej stronie każdego przycisku jest dłuższy niż dozwolona przestrzeń (linia 75). Jeśli tak, upuszcza przycisk w dół linii i aktualizuje marginesy.

make_title (w make_title.js)

make_title jest podobny do make_buttons w tym sensie, że automatycznie podzieli tytuł twojego wykresu na wiele linii i w razie potrzeby podzieli dzielenie wyrazów. Jest to nieco zhackowane, ponieważ nie ma wyrafinowania w schemacie dzielenia wyrazów TeX, ale działa wystarczająco dobrze. Jeśli potrzebujemy więcej linii niż jeden, marginesy są aktualizowane.

Po ustawieniu przycisków, tytułu i marginesów możemy tworzyć nasze osie.

make_axes (w make_axes.js)

Logika make_axes odzwierciedla te, które służą do obliczania przestrzeni potrzebnej do atrapy osi. Tutaj jednak dodaje przejścia do zmiany między osiami.

Wreszcie nasz wykres rozproszenia

Po wykonaniu wszystkich tych ustawień możemy w końcu stworzyć nasz wykres rozproszenia. Ponieważ nasze zestawy danych mogą mieć inną liczbę punktów, musimy wziąć to pod uwagę i odpowiednio wykorzystać zdarzenia wejścia i wyjścia d3. Uzyskiwanie liczby już istniejących punktów odbywa się w linii 40. Instrukcja if w linii 45 - 59 dodaje więcej elementów okręgu, jeśli mamy więcej danych, lub przenosi dodatkowe elementy do rogu, a następnie usuwa je, jeśli jest ich zbyt wiele.

Gdy wiemy, że mamy odpowiednią liczbę elementów, możemy przenieść wszystkie pozostałe elementy do ich prawidłowej pozycji (linia 64)

Na koniec dodajemy podpowiedź w wierszach 67 i 68. Funkcja podpowiedzi znajduje się w make_tooltip.js

Tabela pudełek i wąsów

Aby pokazać wartość tworzenia uogólnionych funkcji, takich jak w poprzednim przykładzie (make_title, make_axes, make_buttons itp.), Rozważ to pole i tabelkę: https://bl.ocks.org/SumNeuron/262e37e2f932cf4b693f241c52a410ff

Podczas gdy kod do tworzenia pudełek i wąsów jest bardziej intensywny niż zwykłe umieszczanie punktów, widzimy, że te same funkcje działają idealnie.

Wykres słupkowy

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