D3 Examples - D3.js - LabDay - 2 - Dessiner du SVG avec D3

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
/*     body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } */
  </style>
</head>
​
<body>
  
  <h1>Dessiner des SVG avec D3.js</h1>
​
  <script type="text/javascript">
    
      // Largeur et hauteur
      var w = 500;
      var h = 100;
      var barPadding = 1;
​
      var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
          11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
​
      // Crée l'élément SVG
      var svg = d3.select("body")
          .append("svg")
          .attr("width", w)
          .attr("height", h);
​
      // Insère les barres
      svg.selectAll("rect")
          .data(dataset)
          .enter()
          .append("rect")
          .attr("x", function(d, i) {
                    // Pour répartir uniformément les barres sur la largeur du SVG,
                    // quelque soit la taille du tableau
              return i * (w / dataset.length);
          })
          .attr("y", function(d) {
                // Hauteur moins la valeur de la donnée
              return h - (d * 4);
          })
            // Pour adapter la largeur des barres à largeur du SVG, en fonction de leur nombre
          .attr("width", w / dataset.length - barPadding)
          .attr("height", function(d) {
              return d * 4;  // Juste la valeur de la donnée
          })
          .attr("fill", function(d) {
              return "rgb(0, 0, " + (d * 10) + ")";
          });
​
      // Insère les étiquettes
      svg.selectAll("text")
          .data(dataset)
          .enter()
          .append("text")
          .text(function(d) {
              return d;
          })
          .attr("x", function(d, i) {
              // calculer la position x en la définissant comme le côté gauche
                    // de chaque barre plus la moitié de la largeur de la barre
              return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
          })
          .attr("y", function(d) {
              return h - (d * 4) + 14;
          })
          .attr("text-anchor", "middle")
          .attr("font-family", "sans-serif")
          .attr("font-size", "11px")
          .attr("fill", "white");
    
  </script>
  
</body>
​
    