D3.js - wykresy rysunkowe

D3.js służy do tworzenia statycznego wykresu SVG. Pomaga narysować następujące wykresy -

• Wykres słupkowy
• Wykres kołowy
• Wykres kołowy
• Wykres pierścieniowy
• Wykres liniowy
• Wykres bąbelkowy itp.

W tym rozdziale opisano rysowanie wykresów w D3. Rozumiemy szczegółowo każdy z nich.

Wykres słupkowy

Wykresy słupkowe są jednym z najczęściej używanych typów wykresów i służą do wyświetlania i porównywania liczby, częstotliwości lub innych miar (np. Średniej) dla różnych dyskretnych kategorii lub grup. Ten wykres jest skonstruowany w taki sposób, że wysokości lub długości różnych słupków są proporcjonalne do rozmiaru kategorii, którą reprezentują.

Oś X (oś pozioma) reprezentuje różne kategorie, których nie ma skali. Oś y (oś pionowa) ma skalę, co wskazuje na jednostki miary. Słupki można rysować pionowo lub poziomo, w zależności od liczby kategorii oraz długości lub złożoności kategorii.

Narysuj wykres słupkowy

Utwórzmy wykres słupkowy w SVG za pomocą D3. W tym przykładzie możemy użyćrect elements do barów i text elements aby wyświetlić nasze wartości danych odpowiadające słupkom.

Aby utworzyć wykres słupkowy w SVG za pomocą D3, wykonajmy kroki podane poniżej.

Step 1 - Adding style in the rect element - Dodajmy następujący styl do prostego elementu.

svg rect {
   fill: gray;
}

Step 2 - Add styles in text element- Dodaj następującą klasę CSS, aby zastosować style do wartości tekstowych. Dodaj ten styl do elementu tekstowego SVG. Jest zdefiniowany poniżej -

svg text {
   fill: yellow;
   font: 12px sans-serif;
   text-anchor: end;
}

Tutaj Fill służy do nakładania kolorów. Zakotwiczenie tekstu służy do umieszczania tekstu w kierunku prawego końca słupków.

Step 3 - Define variables- Dodajmy zmienne do skryptu. Jest to wyjaśnione poniżej.

<script>
   var data = [10, 5, 12, 15];
   var width = 300,
      scaleFactor = 20,
      barHeight = 30;
</script>

Tutaj,

• Width - Szerokość SVG.

• Scalefactor - Skalowane do wartości w pikselach widocznej na ekranie.

• Barheight - To jest statyczna wysokość poziomych prętów.

Step 4 - Append SVG elements - Dołączmy elementy SVG w D3, używając poniższego kodu.

var graph = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", barHeight * data.length);

Tutaj najpierw wybierzemy treść dokumentu, utworzymy nowy element SVG, a następnie dołączymy go. Nasz wykres słupkowy zbudujemy wewnątrz tego elementu SVG. Następnie ustaw szerokość i wysokość SVG. Wysokość jest obliczana jako wysokość słupka * liczba wartości danych.

Przyjęliśmy wysokość słupka jako 30, a długość tablicy danych to 4. Następnie wysokość SVG jest obliczana jako wysokość baru * długość danych, która wynosi 120 pikseli.

Step 5 - Apply transformation - Zastosujmy transformację w bar, używając poniższego kodu.

var bar = graph.selectAll("g") 
   .data(data)
   .enter()
   .append("g")
   .attr("transform", function(d, i) {
      return "translate(0," + i * barHeight + ")";
   });

Tutaj każdy pasek w środku odpowiada elementowi. Dlatego tworzymy elementy grupowe. Każdy z elementów naszej grupy musi być umieszczony jeden pod drugim, aby utworzyć poziomy wykres słupkowy. Weźmy indeks formuły transformacji * wysokość słupka.

Step 6 - Append rect elements to the bar- W poprzednim kroku dodaliśmy elementy grupowe. Teraz dodaj elementy rect do paska, używając następującego kodu.

bar.append("rect")
   .attr("width", function(d) {
      return d * scaleFactor;
   })
   .attr("height", barHeight - 1);

Tutaj szerokość to (wartość danych * współczynnik skali), a wysokość to (wysokość słupka - margines).

Step 7 - Display data- To jest ostatni krok. Wyświetlmy dane na każdym słupku za pomocą następującego kodu.

bar.append("text")
   .attr("x", function(d) { return (d*scaleFactor); })
   .attr("y", barHeight / 2)
   .attr("dy", ".35em")
   .text(function(d) { return d; });

Tutaj szerokość jest zdefiniowana jako (wartość danych * współczynnik skali). Elementy tekstowe nie obsługują dopełnienia ani marginesów. Z tego powodu musimy nadać mu „dy” offset. Służy do wyrównania tekstu w pionie.

Step 8 - Working example- Pełna lista kodów jest pokazana w poniższym bloku kodu. Utwórz stronę internetowąbarcharts.html i dodaj następujące zmiany.

barcharts.html

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         svg rect {
            fill: gray;
         }
         
         svg text {
            fill: yellow;
            font: 12px sans-serif;
            text-anchor: end;
         }
      </style>
   </head>

   <body>
      <script>
         var data = [10, 5, 12, 15];
         
         var width = 300 
            scaleFactor = 20, 
            barHeight = 30;
         
         var graph = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", barHeight * data.length);
         
         var bar = graph.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function(d, i) {
               return "translate(0," + i * barHeight + ")";
            });
         bar.append("rect").attr("width", function(d) {
            return d * scaleFactor;
         })
         
         .attr("height", barHeight - 1);
         
         bar.append("text")
            .attr("x", function(d) { return (d*scaleFactor); })
            .attr("y", barHeight / 2)
            .attr("dy", ".35em")
            .text(function(d) { return d; });
      </script>
   </body>
</html>

Teraz poproś o przeglądarkę, zobaczysz następującą odpowiedź.

Wykres kołowy

Wykres kołowy jest okrągłą grafiką statystyczną podzieloną na wycinki w celu zilustrowania proporcji liczbowych.

Narysuj wykres kołowy

Utwórzmy wykres kołowy w SVG za pomocą D3. Aby to zrobić, musimy przestrzegać następujących kroków -

Step 1 - Define variables- Dodajmy zmienne do skryptu. Jest to pokazane w bloku kodu poniżej.

<script>
   var width = 400;
   var height = 400;
   var data = [10, 20, 30];
   var colors = ['green', 'purple', 'yellow'];
</script>

Tutaj,

• Width - szerokość SVG.

• Height - wysokość SVG.

• Data - tablica elementów danych.

• Colors - zastosuj kolory do elementów koła.

Step 2 - Append SVG elements - Dołączmy elementy SVG w D3, używając poniższego kodu.

var svg = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", height);

Step 3 - Apply transformation - Zastosujmy transformację w SVG za pomocą poniższego kodu.

var g = svg.selectAll("g")
   .data(data)
   .enter()
   .append("g")
   .attr("transform", function(d, i) {
      return "translate(0,0)";
   })

Tutaj,

var g = svg.selectAll(“g”) - Tworzy element grupowy do przechowywania okręgów.

.data(data) - Wiąże naszą tablicę danych z elementami grupy.

.enter() - Tworzy symbole zastępcze dla elementów naszej grupy.

.append(“g”) - Dołącza elementy grupowe do naszej strony.

.attr("transform", function(d, i) {
   return "translate(0,0)";
})

Tutaj translacja służy do pozycjonowania elementów względem pochodzenia.

Step 4 - Append circle elements - Teraz dołącz elementy okręgu do grupy, używając następującego kodu.

g.append("circle")

Teraz dodaj atrybuty do grupy, używając następującego kodu.

.attr("cx", function(d, i) {
   return i*75 + 50;
})

Tutaj używamy współrzędnej x środka każdego koła. Mnożymy indeks koła przez 75 i dodajemy wypełnienie 50 między okręgami.

Następnie ustawiamy współrzędną y środka każdego okręgu. Służy do ujednolicenia wszystkich okręgów i jest zdefiniowane poniżej.

.attr("cy", function(d, i) {
   return 75;
})

Następnie ustaw promień każdego okręgu. Jest zdefiniowany poniżej,

.attr("r", function(d) {
   return d*1.5;
})

Tutaj promień jest mnożony przez wartość danych wraz ze stałą „1,5”, aby zwiększyć rozmiar koła. Na koniec wypełnij kolorami dla każdego koła, używając następującego kodu.

.attr("fill", function(d, i){
   return colors[i];
})

Step 5 - Display data- To jest ostatni krok. Wyświetlmy dane na każdym okręgu za pomocą następującego kodu.

g.append("text")
   .attr("x", function(d, i) {
      return i * 75 + 25;
   })
   .attr("y", 80)
   .attr("stroke", "teal")
   .attr("font-size", "10px")
   .attr("font-family", "sans-serif")
   .text(function(d) {
      return d;
   });

Step 6 - Working Example- Pełna lista kodów jest pokazana w poniższym bloku kodu. Utwórz stronę internetowącirclecharts.html i dodaj w nim następujące zmiany.

circlecharts.html

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <script>
         var width = 400;
         
         var height = 400;
         
         var data = [10, 20, 30];
         
         var colors = ['green', 'purple', 'yellow'];
         
         var svg = d3
            .select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         
         var g = svg.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function(d, i) {
               return "translate(0,0)";
            })
         
         g.append("circle").attr("cx", function(d, i) {
            return i*75 + 50;
         })
         
         .attr("cy", function(d, i) {
            return 75;
         })
  
         .attr("r", function(d) {
            return d*1.5;
         })
         
         .attr("fill", function(d, i){
            return colors[i];
         })
         
         g.append("text").attr("x", function(d, i) {
            return i * 75 + 25;
         })
         
         .attr("y", 80)
         .attr("stroke", "teal")
         .attr("font-size", "10px")
         .attr("font-family", "sans-serif").text(function(d) {
            return d;
         });
      </script>
   </body>
</html>

Teraz poproś o przeglądarkę, a otrzymasz odpowiedź.

Wykres kołowy

Wykres kołowy to okrągły wykres statystyczny. Jest podzielony na plasterki, aby pokazać proporcje liczbowe. Pozwól nam zrozumieć, jak utworzyć wykres kołowy w D3.

Narysuj wykres kołowy

Zanim zaczniemy rysować wykres kołowy, musimy zrozumieć dwie następujące metody:

• Metoda d3.arc () i
• Metoda d3.pie ().

Rozumiemy szczegółowo obie te metody.

The d3.arc() Method- Metoda d3.arc () generuje łuk. Musisz ustawić promień wewnętrzny i promień zewnętrzny łuku. Jeśli promień wewnętrzny wynosi 0, wynikiem będzie wykres kołowy, w przeciwnym razie wynikiem będzie wykres pierścieniowy, co omówiono w następnej sekcji.

The d3.pie()Method- Metoda d3.pie () służy do generowania wykresu kołowego. Pobiera dane ze zbioru danych i oblicza kąt początkowy i końcowy dla każdego klina wykresu kołowego.

Narysujmy wykres kołowy, wykonując następujące kroki.

Step 1 - Applying styles - Zastosujmy następujący styl do elementu łukowego.

.arc text {
   font: 12px arial;
   text-anchor: middle;
}

.arc path {
   stroke: #fff;
}

.title {
   fill: green;
   font-weight: italic;
}

Tutaj wypełnienie służy do nakładania kolorów. Zakotwiczenie tekstu służy do umieszczania tekstu w kierunku środka łuku.

Step 2 - Define variables - Zdefiniuj zmienne w skrypcie, jak pokazano poniżej.

<script>
   var svg = d3.select("svg"),
      width = svg.attr("width"),
      height = svg.attr("height"),
      radius = Math.min(width, height) / 2;
</script>

Tutaj,

• Width - Szerokość SVG.

• Height - Wysokość SVG.

• Radius - Można to obliczyć za pomocą funkcji Math.min (szerokość, wysokość) / 2;

Step 3 - Apply Transformation - Zastosuj następującą transformację w SVG, używając następującego kodu.

var g = svg.append("g")
   .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

Teraz dodaj kolory za pomocą d3.scaleOrdinal działają jak podano poniżej.

var color = d3.scaleOrdinal(['gray', 'green', 'brown', 'orange']);

Step 4 - Generate a pie chart - Teraz wygeneruj wykres kołowy za pomocą funkcji podanej poniżej.

var pie = d3.pie()
   .value(function(d) { return d.percent; });

Tutaj możesz wykreślić wartości procentowe. Aby powrócić, wymagana jest funkcja anonimowad.percent i ustaw jako wartość kołową.

Step 5 - Define arcs for pie wedges - Po wygenerowaniu wykresu kołowego zdefiniuj teraz łuk dla każdego segmentu kołowego za pomocą funkcji podanej poniżej.

var arc = d3.arc()
   .outerRadius(radius)
   .innerRadius(0);

Tutaj ten łuk zostanie ustawiony na elementy ścieżki. Obliczony promień jest ustawiony na promień zewnętrzny, podczas gdy promień wewnętrzny jest ustawiony na 0.

Step 6 - Add labels in wedges- Dodaj etykiety w segmentach ciasta, podając promień. Jest zdefiniowany w następujący sposób.

var label = d3
   .arc()
   .outerRadius(radius)
   .innerRadius(radius - 80);

Step 7 - Read data- To ważny krok. Dane możemy odczytać korzystając z funkcji podanej poniżej.

d3.csv("populations.csv", function(error, data) {
   if (error) {
      throw error;
   }
});

Tutaj, populations.csvzawiera plik danych. Plikd3.csvfunkcja odczytuje dane ze zbioru danych. Jeśli nie ma danych, zgłasza błąd. Możemy dołączyć ten plik do ścieżki D3.

Step 8 - Load data - Następnym krokiem jest załadowanie danych przy użyciu następującego kodu.

var arc = g.selectAll(".arc")
   .data(pie(data))
   .enter()
   .append("g")
   .attr("class", "arc");

Tutaj możemy przypisać dane do elementów grupowych dla każdej wartości danych ze zbioru danych.

Step 9 - Append path - Teraz dodaj ścieżkę i przypisz „łuk” klasy do grup, jak pokazano poniżej.

arcs.append("path")
   .attr("d", arc)
   .attr("fill", function(d) { return color(d.data.states); });

Tutaj do zastosowania koloru danych używane jest wypełnienie. Jest pobierany zd3.scaleOrdinal funkcjonować.

Step 10 - Append text - Aby wyświetlić tekst na etykietach przy użyciu następującego kodu.

arc.append("text")
   .attr("transform", function(d) { 
      return "translate(" + label.centroid(d) + ")"; 
   })
.text(function(d) { return d.data.states; });

Tutaj element tekstowy SVG służy do wyświetlania tekstu na etykietach. Etykieta łuki, którą utworzyliśmy wcześniej za pomocąd3.arc()zwraca punkt ciężkości, który jest pozycją etykiet. Na koniec udostępniamy dane za pomocąd.data.browser.

Step 11 - Append group elements - Dołącz atrybuty elementów grupy i dodaj tytuł klasy, aby pokolorować tekst i uczynić go kursywą, co jest określone w kroku 1 i zdefiniowane poniżej.

svg.append("g")
   .attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
   .append("text")
   .text("Top population states in india")
   .attr("class", "title")

Step 12 - Working Example- Aby narysować wykres kołowy, możemy wziąć zbiór danych dotyczących populacji Indii. Ten zestaw danych przedstawia populację w fikcyjnej witrynie internetowej, która jest zdefiniowana w następujący sposób.

population.csv

states,percent
UP,80.00
Maharastra,70.00
Bihar,65.0
MP,60.00
Gujarat,50.0
WB,49.0
TN,35.0

Utwórzmy wizualizację wykresu kołowego dla powyższego zbioru danych. Utwórz stronę internetową „piechart.html” i dodaj do niej następujący kod.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .arc text {
            font: 12px arial;
            text-anchor: middle;
         }
         
         .arc path {
            stroke: #fff;
         }
        
        .title {
            fill: green;
            font-weight: italic;
         }
      </style>
      
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <svg width = "400" height = "400"></svg>
      <script>
         var svg = d3.select("svg"),
            width = svg.attr("width"),
            height = svg.attr("height"),
            radius = Math.min(width, height) / 2;
        
         var g = svg.append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

         var color = d3.scaleOrdinal([
            'gray', 'green', 'brown', 'orange', 'yellow', 'red', 'purple'
         ]);
         
         var pie = d3.pie().value(function(d) { 
            return d.percent; 
         });
         
         var path = d3.arc()
            .outerRadius(radius - 10).innerRadius(0);
        
         var label = d3.arc()
            .outerRadius(radius).innerRadius(radius - 80);
         
         d3.csv("populations.csv", function(error, data) {
            if (error) {
               throw error;
            }
            
            var arc = g.selectAll(".arc")
               .data(pie(data))
               .enter()
               .append("g")
               .attr("class", "arc");
            
            arc.append("path")
               .attr("d", path)
               .attr("fill", function(d) { return color(d.data.states); });
        
            console.log(arc)
        
            arc.append("text").attr("transform", function(d) { 
               return "translate(" + label.centroid(d) + ")"; 
            })
            
            .text(function(d) { return d.data.states; });
         });
         
         svg.append("g")
            .attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
            .append("text").text("Top population states in india")
            .attr("class", "title")
      </script>
   </body>
</html>