DC.js - Kreisdiagramm

Ein Kreisdiagramm ist ein kreisförmiges statistisches Diagramm. Es ist in Scheiben unterteilt, um einen numerischen Anteil anzuzeigen. In diesem Kapitel wird ausführlich erläutert, wie Sie mit DC.js ein Kreisdiagramm zeichnen.

Kreisdiagramm-Methoden

Bevor wir mit dem Zeichnen eines Kreisdiagramms fortfahren, sollten wir das verstehen dc.pieChartKlasse und ihre Methoden. Das dc.pieChart verwendet Mixins, um die Grundfunktionen zum Zeichnen eines Diagramms zu erhalten. Die von dc.pieChart verwendeten Mixins sind wie folgt:

baseMixin
capMixin
colorMixin

Das vollständige Klassendiagramm eines dc.pieChart lautet wie folgt:

Das dc.pieChart ruft alle Methoden der oben angegebenen Mixins ab und verfügt über eigene Methoden zum spezifischen Zeichnen des Kreisdiagramms. Sie sind wie folgt -

cx ([cx])
drawPaths ([Pfad])
emptyTitle ([title])
externalLabels ([label])
innerRadius ([innerRadius])
minAngleForLabel ([minAngleForLabel])
Radius ([Radius])
slicesCap ([cap])

Lassen Sie uns diese im Detail besprechen.

cx ([cx])

Es wird verwendet, um die unten definierte mittlere x-Koordinatenposition abzurufen oder festzulegen.

chart.cx = function (cx) {
   if (!arguments.length) {
      return (_cx ||  _chart.width() / 2);
   }
};

Ebenso können Sie die Position der y-Koordinate ausführen.

drawPaths ([Pfad])

Diese Methode wird zum Zeichnen von Pfaden für ein Kreisdiagramm verwendet und ist nachstehend definiert:

chart.drawPaths = function (path) {
   if (arguments.length === 0) {
      return path;
   }
};

emptyTitle ([title])

Diese Methode wird verwendet, um den Titel festzulegen, wenn keine Daten vorhanden sind. Es ist unten definiert -

chart.emptyTitle = function (title) {
   if (arguments.length === 0) {
      return title;
   }
};

externalLabels ([label])

Es wird verwendet, um Slice-Beschriftungen zu positionieren, die vom äußeren Rand des Diagramms versetzt sind. Es ist unten definiert -

chart.externalLabels = function (label) {
   if (arguments.length === 0) {
      return label;
   } 
};

innerRadius ([innerRadius])

Diese Methode wird verwendet, um den Innenradius des Kreisdiagramms abzurufen oder festzulegen. Wenn der Innenradius größer als ist0pxDann wird das Kreisdiagramm als Donut-Diagramm gerendert. Es ist unten definiert -

_chart.innerRadius = function (innerRadius) {
   if (!arguments.length) {
      return _innerRadius;
   }
};

minAngleForLabel ([minAngleForLabel])

Diese Methode wird verwendet, um den minimalen Schnittwinkel für das Rendern von Etiketten abzurufen oder festzulegen. Es ist unten definiert -

_chart.minAngleForLabel = function (minAngleForLabel) {
   if (!arguments.length) {
      return _minAngleForLabel;
   }
   _minAngleForLabel = minAngleForLabel;
   return _chart;
};

Radius ([Radius])

Diese Methode wird verwendet, um den Außenradius abzurufen oder einzustellen. Wenn der Radius nicht angegeben ist, wird die Hälfte der minimalen Diagrammbreite und -höhe benötigt. Es ist unten definiert -

_chart.radius = function (radius) {
   if (!arguments.length) {
      return _givenRadius;
   }
   _givenRadius = radius;
   return _chart;
};

slicesCap ([cap])

Ruft die maximale Anzahl von Slices ab, die das Kreisdiagramm generiert, oder legt diese fest. Die oberen Scheiben werden durch einen Wert von hoch nach niedrig bestimmt. Andere Scheiben, die die Obergrenze überschreiten, werden zu einer einzigen "Andere" -Scheibe aufgerollt.

Zeichnen Sie ein Kreisdiagramm

Lassen Sie uns ein Kreisdiagramm in DC erstellen. Nehmen wir in diesem Beispiel eines Kreisdiagramms einen Datensatz mit dem Namenpeople.csvDatei. Die Beispieldatendatei lautet wie folgt:

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

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

Das obige Beispiel enthält viele Datensätze. Sie können die Datei herunterladen, indem Sie auf den folgenden Link klicken und sie am DC-Speicherort speichern.

people.csv

Lassen Sie uns nun die folgenden Schritte ausführen, um ein Kreisdiagramm in DC zu zeichnen.

Schritt 1: Fügen Sie ein Skript hinzu

Fügen wir D3, DC und Crossfilter mit dem folgenden Code hinzu:

<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>

Schritt 2: Definieren Sie eine Variable

Erstellen Sie ein Objekt vom Typ, dc.pieChart wie unten gezeigt -

var pieChart = dc.pieChart('#pie');

Hier wird die Pie-ID einem Pie zugeordnet.

Schritt 3: Lesen Sie die Daten

Lesen Sie Ihre Daten (z. B. von people.csv) mit dem d3.csv()Funktion. Es ist wie folgt definiert:

d3.csv("data/people.csv", function(errors, people) {
   console.log(people);
}

Wenn die Datendatei am angegebenen Speicherort nicht verfügbar ist, gibt die Funktion d3.csv () einen Fehler zurück.

Schritt 4: Definieren Sie den Crossfilter

Definieren Sie eine Variable für Crossfilter und weisen Sie die Daten Crossfilter zu. Es ist unten definiert -

var mycrossfilter = crossfilter(people);

Schritt 5: Erstellen Sie eine Dimension

Erstellen Sie eine Dimension für das Geschlecht mit der folgenden Funktion -

var genderDimension = mycrossfilter.dimension(function(data) { 
   return data.gender; 
});

Hier wird das Geschlecht der Menschen für die Dimension verwendet.

Schritt 6: reductCount ()

Erstellen Sie eine Crossfilter-Gruppe, indem Sie die Funktion group () und reduCount () auf die oben erstellte geschlechtsspezifische Dimension anwenden. groupDimension.

var genderGroup = genderDimension.group().reduceCount();

Schritt 7: Kuchen generieren

Generieren Sie den Kuchen mit der folgenden Funktion -

pieChart
   .width(800)
   .height(300)
   .dimension(genderDimension)
   .group(genderGroup)
   .on('renderlet', function(chart) {
      chart.selectAll('rect').on('click', function(d) {
         console.log('click!', d);
      });
   });

dc.renderAll();

Hier,

Die Breite des Kreisdiagramms ist auf 800 eingestellt.
Die Höhe des Kreisdiagramms ist auf 300 eingestellt.
Die Dimension des Kreisdiagramms ist auf eingestellt genderDimension mit der dimension () -Methode.
Die Gruppe des Kreisdiagramms ist auf eingestellt genderGroup mit der group () -Methode.
Es wurde ein Klickereignis hinzugefügt, um die Daten mithilfe des integrierten Ereignisses DC.js zu protokollieren. renderlet(). Das Renderlet wird immer dann aufgerufen, wenn das Diagramm gerendert oder gezeichnet wird.

Schritt 8: Arbeitsbeispiel

Erstellen Sie eine neue HTML-Datei, pie.html, und führen Sie alle oben genannten Schritte aus, wie unten gezeigt.

<html>
   <head>
      <title>DC.js Pie 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 = "pie"></div>
      </div>

      <script language = "javascript">
         var pieChart = dc.pieChart('#pie');

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

            // gender dimension
            var genderDimension = mycrossfilter.dimension(function(data) { 
               return data.gender; 
            });
            var genderGroup = genderDimension.group().reduceCount();

            pieChart
               .width(800)
               .height(300)
               .dimension(genderDimension)
               .group(genderGroup)
               .on('renderlet', function(chart) {
                  chart.selectAll('rect').on('click', function(d) {
                     console.log('click!', d);
                  });
               });

            dc.renderAll();
         });
      </script>
   </body>
</html>

Fordern Sie jetzt den Browser an und wir sehen die folgende Antwort.