DC.js - wykres liniowy

Wykres liniowy służy do wyświetlania informacji w postaci serii punktów danych połączonych liniami prostymi. Punkt danych reprezentuje dwie wartości, jedną wykreśloną wzdłuż osi poziomej, a drugą wzdłuż osi pionowej. Na przykład popularność artykułów spożywczych można przedstawić w postaci wykresu liniowego w taki sposób, że artykuł żywnościowy jest reprezentowany na osi x, a jego popularność na osi y. W tym rozdziale szczegółowo omówiono wykresy liniowe.

Metody wykresów liniowych

Zanim przejdziemy do rysowania wykresu liniowego, powinniśmy zrozumieć dc.lineChartklasa i jej metody. Dc.lineChart używa mixins, aby uzyskać podstawową funkcjonalność rysowania wykresu. Miksy używane przez dc.lineChart są następujące -

dc.stackMixin
dc.coordinateGridMixin

Pełny diagram klas wykresu dc.lineChart jest następujący -

Dc.lineChart pobiera wszystkie metody z wyżej określonych mixinów, a także ma własne metody rysowania wykresu liniowego. Są one wyjaśnione w następujący sposób.

dashStyle ([style])

Ta metoda służy do ustawiania stylu myślnika dla wykresu liniowego.

dotRadius ([promień])

Ta metoda służy do pobierania lub ustawiania promienia (w PX) dla kropek wyświetlanych w punktach danych. Jest zdefiniowany w następujący sposób -

chart.dotRadius = function (radius) {
   if (!arguments.length) {
      return radius;
   }
};

interpoluj ([i])

Ta metoda służy do pobierania lub ustawiania interpolatora dla linii.

renderArea ([obszar])

Ta metoda służy do pobierania lub ustawiania obszaru renderowania.

renderDataPoints ([opcje])

Ta metoda służy do renderowania pojedynczych kropek dla każdego punktu danych.

napięcie ([napięcie])

Ta metoda służy do pobierania lub ustawiania napięcia dla narysowanych linii. Jest w zakresie od 0 do 1.

xyTipsOn ([xyTipsOn])

Ta metoda służy do zmiany zachowania myszy w poszczególnych punktach danych.

Narysuj wykres liniowy

Narysujmy wykres liniowy w DC. Aby to zrobić, musimy wykonać kroki podane poniżej -

Krok 1: Zdefiniuj zmienną

Zdefiniujmy zmienną, jak pokazano poniżej -

var chart = dc.lineChart('#line');

W tym przypadku funkcja dc.linechart jest mapowana na kontener mający rozszerzenie id line.

Krok 2: Przeczytaj dane

Odczytaj dane z people.csv plik -

d3.csv("data/people.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

Tutaj, jeśli użyliśmy tego samego zestawu danych people.csv, przykładowy plik danych będzie wyglądał następująco -

id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay

...............
................
................

Krok 3: Utwórz wymiar wieku

Teraz utwórz wymiar dla wieku, jak pokazano poniżej -

var ageDimension = mycrossfilter.dimension(function(data) { 
    return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
});

Tutaj przypisaliśmy wiek z danych Crossfilter.

~~ jest podwójnym operatorem bitowym NIE. Jest używany jako szybszy zamiennikMath.floor() funkcjonować.

Teraz pogrupuj go za pomocą reduceCount() funkcja, która jest zdefiniowana poniżej -

var ageGroup = ageDimension.group().reduceCount();

Krok 4: Wygeneruj wykres

Teraz wygeneruj wykres liniowy, używając kodowania podanego poniżej -

chart
   .width(800)
   .height(300)
   .x(d3.scale.linear().domain([15,70]))
   .brushOn(false)
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .dimension(ageDimension)
   .group(ageGroup)
   .on('renderlet', function(chart) {
      chart.selectAll('rect').on('click', function(d) {
         console.log('click!', d);
      });
   });

chart.render();

Tutaj,

Szerokość wykresu to 800, a wysokość to 300.
Funkcja d3.scale.linear służy do konstruowania nowej skali liniowej z podanym zakresem dziedzinowym [15, 70].
Następnie ustawiamy brushOn wartość na fałsz.
Etykietę osi Y przypisujemy jako count i etykieta osi X jako age.
Na koniec pogrupuj wiek, używając ageGroup.

Krok 5: Przykład roboczy

Pełna lista kodu jest pokazana w poniższym bloku kodu. Utwórz stronę internetowąline.html i dodaj do niego następujące zmiany.

<html>
   <head>
      <title>DC.js Line Chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div id = "line"></div>
      </div>

      <script language = "javascript">
         var chart = dc.lineChart('#line');

         d3.csv("data/people.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

            var ageDimension = mycrossfilter.dimension(function(data) { 
               return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
            });
            var ageGroup = ageDimension.group().reduceCount();

            chart
               .width(800)
               .height(300)
               .x(d3.scale.linear().domain([15,70]))
               .brushOn(false)
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .dimension(ageDimension)
               .group(ageGroup)
               .on('renderlet', function(chart) {
                  chart.selectAll('rect').on('click', function(d) {
                     console.log('click!', d);
                  });
               });
            chart.render();
         });
      </script>
   </body>
</html>

Teraz poproś przeglądarkę, a zobaczymy następującą odpowiedź.