D3.js - API Axis

D3 fournit des fonctions pour dessiner des axes. Un axe est composé de lignes, de graduations et d'étiquettes. Un axe utilise une échelle, donc chaque axe devra avoir une échelle pour travailler avec.

Configuration de l'API Axis

Vous pouvez configurer l'API à l'aide du script suivant.

<script src = "https://d3js.org/d3-axis.v1.min.js"></script>
<script>

</script>

Méthodes API Axis

D3 fournit les fonctions importantes suivantes pour dessiner des axes. Ils sont décrits brièvement comme suit.

  • d3.axisTop() - Cette méthode est utilisée pour créer un axe horizontal supérieur.

  • d3.axisRight() - Cette méthode est utilisée pour créer un axe vertical orienté à droite.

  • d3.axisBottom() - Cette méthode est utilisée pour créer un axe horizontal inférieur.

  • d3.axisLeft() - Il crée un axe vertical gauche.

Exemple de travail

Apprenons à ajouter les axes x et y à un graphique. Pour ce faire, nous devons suivre les étapes ci-dessous.

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

var width = 400, height = 400;
var data = [100, 150, 200, 250, 280, 300];
var svg = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", height);

Step 2 - Create a scale linear function - Créez une fonction linéaire d'échelle pour les axes x et y comme défini ci-dessous.

var xscale = d3.scaleLinear()
   .domain([0, d3.max(data)])
   .range([0, width - 100]);

var yscale = d3.scaleLinear()
   .domain([0, d3.max(data)])
   .range([height/2, 0]);

Ici, nous avons créé une échelle linéaire et spécifié le domaine et la plage.

Step 3 - Add scales to x-axis - Maintenant, nous pouvons ajouter des échelles à l'axe des x en utilisant le code suivant.

var x_axis = d3.axisBottom()
   .scale(xscale);

Ici, nous utilisons d3.axisBottom pour créer notre axe des x et lui fournir l'échelle, qui est définie précédemment.

Step 4 - Add scales to the y-axis - Utilisez le code suivant pour ajouter des échelles à l'axe y.

var y_axis = d3.axisLeft()
   .scale(yscale);

Ici, nous utilisons le d3.axisLeft pour créer notre axe y et lui fournir l'échelle que nous avons définie ci-dessus.

Step 5 - Apply transformation - Vous pouvez ajouter un élément de groupe et insérer l'axe x, y, défini ci-dessous.

svg.append("g")
   .attr("transform", "translate(50, 10)")
   .call(y_axis);

Step 6 - Append group elements - Appliquez des éléments de transition et de groupe à l'aide du code suivant.

var xAxisTranslate = height/2 + 10;
svg.append("g")
   .attr("transform", "translate(50, " + xAxisTranslate  +")")
   .call(x_axis)

Step 7 - Working Example- La liste complète des codes est donnée dans le bloc de code suivant. Créer une page Webaxes.html et ajoutez-y les modifications suivantes.

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

   <body>
      <script>
         var width = 400, height = 400;
         var data = [100, 120, 140, 160, 180, 200];
         var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         
         var xscale = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([0, width - 100]);
         
         var yscale = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([height/2, 0]);
    
         var x_axis = d3.axisBottom().scale(xscale);
         
         var y_axis = d3.axisLeft().scale(yscale);
         
         svg.append("g")
            .attr("transform", "translate(50, 10)")
            .call(y_axis);
         
         var xAxisTranslate = height/2 + 10;
         
         svg.append("g")
            .attr("transform", "translate(50, " + xAxisTranslate  +")")
            .call(x_axis)
      </script>
   </body>
</html>

Maintenant, demandez le navigateur et nous verrons les changements suivants.