D3.js - Arbeitsbeispiel

Lassen Sie uns in diesem Kapitel ein animiertes Balkendiagramm erstellen. In diesem Beispiel nehmen wir die im vorherigen Kapitel der Populationsdatensätze verwendete Datei data.csv als Dataset und generieren ein animiertes Balkendiagramm.

Dazu müssen wir die folgenden Schritte ausführen:

Step 1 - - Apply styles - Wenden Sie CSS-Stile mit der unten angegebenen Codierung an.

<style>
   .bar {
      fill: green;
   }
   
   .highlight {
      fill: red;
   }
   
   .title {
      fill: blue;
      font-weight: bold;
   }
</style>

Step 2 - - Define variables - Definieren wir die SVG-Attribute mithilfe des folgenden Skripts.

<script>
   var svg = d3.select("svg"), margin = 200,
   width = svg.attr("width") - margin,
   height = svg.attr("height") - margin;
</script>

Step 3 - - Append text - Fügen Sie nun Text hinzu und wenden Sie die Transformation mit der folgenden Codierung an.

svg.append("text")
   .attr("transform", "translate(100,0)")
   .attr("x", 50)
   .attr("y", 50)
   .attr("font-size", "20px")
   .attr("class", "title")
   .text("Population bar chart")

Step 4 - - Create scale range- In diesem Schritt können wir einen Skalierungsbereich erstellen und die Gruppenelemente anhängen. Es ist unten definiert.

var x = d3.scaleBand().range([0, width]).padding(0.4),
   y = d3.scaleLinear()
      .range([height, 0]);
   var g = svg.append("g")
      .attr("transform", "translate(" + 100 + "," + 100 + ")");

Step 5 - - Read data - Wir haben das bereits erstellt data.csvDatei in unseren vorherigen Beispielen. Die gleiche Datei haben wir hier verwendet.

year,population
2006,40
2008,45
2010,48
2012,51
2014,53
2016,57
2017,62

Lesen Sie nun die obige Datei mit dem folgenden Code.

d3.csv("data.csv", function(error, data) {
   if (error) {
      throw error;
   }

Step 6 - - Set domain - Stellen Sie nun die Domain mit der folgenden Codierung ein.

x.domain(data.map(function(d) { return d.year; }));
y.domain([0, d3.max(data, function(d) { return d.population; })]);

Step 7 - - Add X-axis- Jetzt können Sie der Transformation die X-Achse hinzufügen. Es ist unten gezeigt.

g.append("g")
   .attr("transform", "translate(0," + height + ")")
   .call(d3.axisBottom(x)).append("text")
   .attr("y", height - 250).attr("x", width - 100)
   .attr("text-anchor", "end").attr("font-size", "18px")
   .attr("stroke", "blue").text("year");

Step 8 - - Add Y-axis - Fügen Sie der Transformation die Y-Achse mit dem unten angegebenen Code hinzu.

g.append("g")
   .append("text").attr("transform", "rotate(-90)")
   .attr("y", 6).attr("dy", "-5.1em")
   .attr("text-anchor", "end").attr("font-size", "18px")
   .attr("stroke", "blue").text("population");

Step 9 - - Append group elements - Fügen Sie nun die Gruppenelemente hinzu und wenden Sie die Transformation wie unten definiert auf die Y-Achse an.

g.append("g")
   .attr("transform", "translate(0, 0)")
   .call(d3.axisLeft(y))

Step 10 - - Select the bar class - Wählen Sie nun alle Elemente in der Balkenklasse wie unten definiert aus.

g.selectAll(".bar")
   .data(data).enter()
   .append("rect")
   .attr("class", "bar")
   .on("mouseover", onMouseOver) 
   .on("mouseout", onMouseOut)
   .attr("x", function(d) { return x(d.year); })
   .attr("y", function(d) { return y(d.population); })
   .attr("width", x.bandwidth())
   .transition()
   .ease(d3.easeLinear)
   .duration(200)
   .delay(function (d, i) {
      return i * 25;
   })
   .attr("height", function(d) { return height - y(d.population); });
});

Hier haben wir das Listener-Ereignis für das Mouseout und Mouseover hinzugefügt, um die Animation auszuführen. Es wendet die Animation an, wenn die Maus über eine bestimmte Leiste fährt und diese verlässt. Diese Funktionen werden im folgenden Schritt erläutert.

Das .ease(d3.easeLinear)Die Funktion wird verwendet, um scheinbare Bewegungen in der Animation auszuführen. Es verarbeitet die Slow-In- und die Slow-Out-Bewegung mit einer Dauer von 200. Die Verzögerung kann berechnet werden mit -

.delay(function (d, i) {
   return i * 25;
})

Step 11 - - Mouseover event handler function - Lassen Sie uns einen Mouseover-Ereignishandler erstellen, um ein Mausereignis wie unten gezeigt zu behandeln.

function onMouseOver(d, i) {
   d3.select(this)
      .attr('class', 'highlight');
   d3.select(this)
      .transition()
      .duration(200)
      .attr('width', x.bandwidth() + 5)
      .attr("y", function(d) { return y(d.population) - 10; })
      .attr("height", function(d) { return height - y(d.population) + 10; });
   g.append("text")
      .attr('class', 'val') 
   
   .attr('x', function() {
      return x(d.year);
   })
   
   .attr('y', function() {
      return y(d.value) - 10;
   })
}

Hier möchten wir im Mouseover-Ereignis die Balkenbreite und -höhe sowie die Balkenfarbe des ausgewählten Balkens auf Rot erhöhen. Für die Farbe haben wir eine Klasse 'Hervorhebung' hinzugefügt, die die Farbe des ausgewählten Balkens in Rot ändert.

Eine Übergangsfunktion zum Balken für die Dauer von 200 Millisekunden. Wenn wir die Breite des Balkens um 5 Pixel und die Höhe um 10 Pixel erhöhen, dauert der Übergang von der vorherigen Breite und Höhe des Balkens zur neuen Breite und Höhe 200 Millisekunden.

Als Nächstes haben wir einen neuen 'y'-Wert für den Balken berechnet, damit der Balken nicht aufgrund des neuen Höhenwerts verzerrt wird.

Step 12 - - Mouseout event handler function- Lassen Sie uns einen Mouseout-Ereignishandler erstellen, um ein Mausereignis zu behandeln. Es ist unten definiert.

function onMouseOut(d, i) {
   d3.select(this).attr('class', 'bar');
   
   d3.select(this)
      .transition()     
      .duration(400).attr('width', x.bandwidth())
      .attr("y", function(d) { return y(d.population); })
      .attr("height", function(d) { return height - y(d.population); });
   
   d3.selectAll('.val')
      .remove()
}

Hier im Mouseout-Ereignis möchten wir die Auswahlfunktionen entfernen, die wir im Mouseover-Ereignis angewendet haben. Daher setzen wir die Balkenklasse auf die ursprüngliche 'Balken'-Klasse zurück und stellen die ursprüngliche Breite und Höhe des ausgewählten Balkens wieder her und stellen den y-Wert auf den ursprünglichen Wert zurück.

Das d3.selectAll(‘.val’).remove() Mit dieser Funktion wird der Textwert entfernt, den wir bei der Balkenauswahl hinzugefügt haben.

Step 13 - - Working Example- Das komplette Programm finden Sie im folgenden Codeblock. Erstellen Sie eine Webseiteanimated_bar.html und fügen Sie die folgenden Änderungen hinzu.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .bar {
            fill: green;
         }
        
         .highlight {
            fill: red;
         }
         
         .title {
            fill: blue;
            font-weight: bold;
         }
      </style>
      <script src = "https://d3js.org/d3.v4.min.js"></script>
      <title> Animated bar chart </title>
   </head>

   <body>
      <svg width = "500" height = "500"></svg>
      <script>
         var svg = d3.select("svg"),
         margin = 200, width = svg.attr("width") - margin,
         height = svg.attr("height") - margin;
         
         svg.append("text")
            .attr("transform", "translate(100,0)")
            .attr("x", 50).attr("y", 50)
            .attr("font-size", "20px")
            .attr("class", "title")
            .text("Population bar chart")
            
         var x = d3.scaleBand().range([0, width]).padding(0.4),
         y = d3.scaleLinear().range([height, 0]);
            
         var g = svg.append("g")
            .attr("transform", "translate(" + 100 + "," + 100 + ")");

         d3.csv("data.csv", function(error, data) {
            if (error) {
               throw error;
            }
               
            x.domain(data.map(function(d) { return d.year; }));
            y.domain([0, d3.max(data, function(d) { return d.population; })]);
                     
            g.append("g")
               .attr("transform", "translate(0," + height + ")")
               .call(d3.axisBottom(x))
               .append("text")
               .attr("y", height - 250)
               .attr("x", width - 100)
               .attr("text-anchor", "end")
               .attr("font-size", "18px")
               .attr("stroke", "blue").text("year");
               
            g.append("g")
               .append("text")
               .attr("transform", "rotate(-90)")
               .attr("y", 6)
               .attr("dy", "-5.1em")
               .attr("text-anchor", "end")
               .attr("font-size", "18px")
               .attr("stroke", "blue")
               .text("population");
                         
            g.append("g")
               .attr("transform", "translate(0, 0)")
               .call(d3.axisLeft(y))

            g.selectAll(".bar")
               .data(data)
               .enter()
               .append("rect")
               .attr("class", "bar")
               .on("mouseover", onMouseOver) 
               .on("mouseout", onMouseOut)   
               .attr("x", function(d) { return x(d.year); })
               .attr("y", function(d) { return y(d.population); })
               .attr("width", x.bandwidth()).transition()
               .ease(d3.easeLinear).duration(200)
               .delay(function (d, i) {
                  return i * 25;
               })
                  
            .attr("height", function(d) { return height - y(d.population); });
         });
          
          
         function onMouseOver(d, i) {
            d3.select(this)
            .attr('class', 'highlight');
               
            d3.select(this)
               .transition()     
               .duration(200)
               .attr('width', x.bandwidth() + 5)
               .attr("y", function(d) { return y(d.population) - 10; })
               .attr("height", function(d) { return height - y(d.population) + 10; });
              
            g.append("text")
               .attr('class', 'val')
               .attr('x', function() {
                  return x(d.year);
               })
               
            .attr('y', function() {
               return y(d.value) - 10;
            })
         }
          
         function onMouseOut(d, i) {
             
            d3.select(this)
               .attr('class', 'bar');
            
            d3.select(this)
               .transition()     
               .duration(200)
               .attr('width', x.bandwidth())
               .attr("y", function(d) { return y(d.population); })
               .attr("height", function(d) { return height - y(d.population); });
            
            d3.selectAll('.val')
               .remove()
         }
      </script>
   </body>
</html>

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

Wenn wir einen Balken auswählen, wird dieser rot hervorgehoben. D3 ist eine universelle Visualisierungsbibliothek, die sich mit der Umwandlung von Daten in Informationen, Dokumente, Elemente usw. befasst und letztendlich bei der Erstellung der Datenvisualisierung hilft.