DC.js - Graphique à secteurs

Un camembert est un graphique statistique circulaire. Il est divisé en tranches pour montrer une proportion numérique. Ce chapitre explique en détail comment dessiner un graphique à secteurs à l'aide de DC.js.

Méthodes de graphique à secteurs

Avant de commencer à dessiner un graphique à secteurs, nous devons comprendre le dc.pieChartclass et ses méthodes. Le dc.pieChart utilise des mixins pour obtenir les fonctionnalités de base du dessin d'un graphique. Les mixins utilisés par dc.pieChart sont les suivants -

baseMixin
capMixin
colorMixin

Le diagramme de classes complet d'un dc.pieChart est le suivant -

Le dc.pieChart obtient toutes les méthodes des mixins spécifiés ci-dessus ainsi que ses propres méthodes pour dessiner spécifiquement le graphique à secteurs. Ils sont les suivants -

cx ([cx])
drawPaths ([chemin])
emptyTitle ([titre])
externalLabels ([label])
innerRadius ([innerRadius])
minAngleForLabel ([minAngleForLabel])
rayon ([rayon])
slicesCap ([cap])

Laissez-nous discuter de chacun d'eux en détail.

cx ([cx])

Il est utilisé pour obtenir ou définir la position des coordonnées centre x, qui est définie ci-dessous -

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

De même, vous pouvez effectuer la position de la coordonnée y.

drawPaths ([chemin])

Cette méthode est utilisée pour tracer des chemins pour un graphique à secteurs et est définie ci-dessous -

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

emptyTitle ([titre])

Cette méthode est utilisée pour définir le titre lorsqu'il n'y a pas de données. Il est défini ci-dessous -

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

externalLabels ([label])

Il est utilisé pour positionner les étiquettes de tranche décalées du bord extérieur du graphique. Il est défini ci-dessous -

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

innerRadius ([innerRadius])

Cette méthode est utilisée pour obtenir ou définir le rayon intérieur du graphique à secteurs. Si le rayon intérieur est supérieur à0px, le graphique à secteurs sera alors rendu sous forme de graphique en anneau. Il est défini ci-dessous -

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

minAngleForLabel ([minAngleForLabel])

Cette méthode est utilisée pour obtenir ou définir l'angle de coupe minimal pour le rendu des étiquettes. Il est défini ci-dessous -

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

rayon ([rayon])

Cette méthode est utilisée pour obtenir ou définir le rayon extérieur. Si le rayon n'est pas spécifié, cela prendra la moitié de la largeur et de la hauteur minimales du graphique. Il est défini ci-dessous -

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

slicesCap ([cap])

Obtient ou définit le nombre maximal de tranches que le graphique à secteurs générera. Les tranches supérieures sont déterminées par une valeur de haut en bas. Les autres tranches dépassant le plafond seront enroulées en une seule tranche «Autres».

Dessiner un graphique à secteurs

Créons un graphique à secteurs dans DC. Dans cet exemple de graphique à secteurs, prenons un jeu de données nommépeople.csvfichier. L'exemple de fichier de données est le suivant -

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

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

L'exemple ci-dessus contient de nombreux enregistrements. Vous pouvez télécharger le fichier en cliquant sur le lien suivant et l'enregistrer dans l'emplacement DC.

people.csv

Maintenant, adhérons aux étapes suivantes pour dessiner un graphique à secteurs dans DC.

Étape 1: inclure un script

Ajoutons D3, DC et Crossfilter en utilisant le code suivant -

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

Étape 2: définir une variable

Créer un objet de type, dc.pieChart comme indiqué ci-dessous -

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

Ici, l'identifiant Pie est mappé avec une tarte.

Étape 3: lire les données

Lisez vos données (par exemple, à partir de people.csv) à l'aide du d3.csv()fonction. Il est défini comme suit -

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

Ici, si le fichier de données n'est pas disponible à l'emplacement spécifié, la fonction d3.csv () renvoie une erreur.

Étape 4: définir le crossfilter

Définissez une variable pour Crossfilter et affectez les données à Crossfilter. Il est défini ci-dessous -

var mycrossfilter = crossfilter(people);

Étape 5: créer une dimension

Créez une dimension pour le genre en utilisant la fonction ci-dessous -

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

Ici, le Genre des personnes est utilisé pour la dimension.

Étape 6: reductionCount ()

Créez un groupe Crossfilter en appliquant la fonction group () et la fonction reductionCount () sur la dimension de genre créée ci-dessus - groupDimension.

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

Étape 7: Générer un tarte

Générez le gâteau en utilisant la fonction ci-dessous -

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();

Ici,

La largeur du graphique à secteurs est définie sur 800.
La hauteur du graphique à secteurs est définie sur 300.
La dimension du graphique à secteurs est définie sur genderDimension en utilisant la méthode dimension ().
Le groupe du graphique à secteurs est défini sur genderGroup en utilisant la méthode group ().
Ajout d'un événement de clic pour enregistrer les données à l'aide de l'événement intégré DC.js, renderlet(). Le rendu est appelé chaque fois que le graphique est rendu ou dessiné.

Étape 8: Exemple de travail

Créez un nouveau fichier html, pie.html et incluez toutes les étapes ci-dessus comme indiqué ci-dessous -

<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>

Maintenant, demandez le navigateur et nous verrons la réponse suivante.