D3.js - API Scales

D3.js fournit des fonctions d'échelle pour effectuer des transformations de données. Ces fonctions mappent un domaine d'entrée à une plage de sortie.

Configurer l'API

Nous pouvons configurer l'API directement à l'aide du script suivant.

<script src = "https://d3js.org/d3-array.v1.min.js"></script>
<script src = "https://d3js.org/d3-collection.v1.min.js"></script>
<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-format.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-time.v1.min.js"></script>
<script src = "https://d3js.org/d3-time-format.v2.min.js"></script>
<script src = "https://d3js.org/d3-scale.v1.min.js"></script>
<script>

</script>

Met à l'échelle les méthodes d'API

D3 fournit les méthodes de mise à l'échelle importantes suivantes pour différents types de graphiques. Comprenons donc en détail.

d3.scaleLinear() - Construit une échelle linéaire continue où nous pouvons entrer des données (domaine) mappées sur la plage de sortie spécifiée.
d3.scaleIdentity() - Construisez une échelle linéaire où les données d'entrée sont les mêmes que la sortie.
d3.scaleTime() - Construisez une échelle linéaire où les données d'entrée sont dans les dates et la sortie en nombres.
d3.scaleLog() - Construisez une échelle logarithmique.
d3.scaleSqrt() - Construisez une échelle de racine carrée.
d3.scalePow() - Construisez une échelle exponentielle.
d3.scaleSequential() - Construire une échelle séquentielle où la plage de sortie est fixée par la fonction d'interpolateur.
d3.scaleQuantize() - Construisez une échelle de quantification avec une plage de sortie discrète.
d3.scaleQuantile() - Construisez une échelle de quantile où les données d'échantillon d'entrée correspondent à la plage de sortie discrète.
d3.scaleThreshold() - Construisez une échelle où les données d'entrée arbitraires correspondent à la plage de sortie discrète.
d3.scaleBand() - Les échelles de bande sont comme des échelles ordinales sauf que la plage de sortie est continue et numérique.
d3.scalePoint() - Construisez une échelle de points.
d3.scaleOrdinal() - Construisez une échelle ordinale où les données d'entrée comprennent des alphabets et sont mappées à la plage de sortie numérique discrète.

Avant de faire un exemple de travail, comprenons d'abord les deux termes suivants -

Domain - Le domaine indique les valeurs minimales et maximales de vos données d'entrée.
Range - La plage est la plage de sortie, à laquelle nous souhaitons que les valeurs d'entrée mappent ...

Exemple de travail

Exécutons la fonction d3.scaleLinear dans cet exemple. Pour ce faire, vous devez suivre les étapes suivantes -

Step 1 - Define variables - Définissez les variables et les données SVG en utilisant le codage ci-dessous.

var data = [100, 200, 300, 400, 800, 0]
   var width = 500, 
      barHeight = 20, 
      margin = 1;

Step 2 - Create linear scale - Utilisez le code suivant pour créer une échelle linéaire.

var scale = d3.scaleLinear()
   .domain([d3.min(data), d3.max(data)])
   .range([100, 400]);

Ici, pour la valeur minimale et maximale de notre domaine manuellement, nous pouvons utiliser la fonction intégrée d3.min() et d3.max() fonctions, qui renverront respectivement les valeurs minimum et maximum de notre tableau de données.

Step 3 - Append SVG attributes - Ajoutez les éléments SVG en utilisant le code ci-dessous.

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

Step 4 - Apply transformation - Appliquez la transformation en utilisant le code ci-dessous.

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

Step 5 - Append rect elements - Ajoutez les éléments rect à la mise à l'échelle comme indiqué ci-dessous.

g.append("rect")
   .attr("width", function (d) {
      return scale(d);
   })
   .attr("height", barHeight - margin)

Step 6 - Display data - Affichez maintenant les données en utilisant le codage ci-dessous.

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

Step 7 - Working Example - Maintenant, créons un histogramme en utilisant la fonction d3.scaleLinear () comme suit.

Créez une page Web «scale.html» et ajoutez-y les modifications suivantes.

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

   <body>
      <script>
         var data = [100, 200, 300, 350, 400, 250]
         var width = 500, barHeight = 20, margin = 1;
         
         var scale = d3.scaleLinear()
            .domain([d3.min(data), d3.max(data)])
            .range([100, 400]);
         
         var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", barHeight * data.length);
         
         var g = svg.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function (d, i) {
               return "translate(0," + i * barHeight + ")";
         });
    
         g.append("rect")
         .attr("width", function (d) {
            return scale(d);
         })
         
         .attr("height", barHeight - margin)
         g.append("text")
         .attr("x", function (d) { return (scale(d)); })
         .attr("y", barHeight / 2).attr("dy", ".35em")
         .text(function (d) { return d; });
      </script>
   </body>
</html>

Le code ci-dessus affichera le résultat suivant dans le navigateur.