D3.js - Contoh Kerja

Mari kita buat grafik batang animasi di bab ini. Untuk contoh ini, kami mengambil file data.csv yang digunakan di bab sebelumnya dari catatan populasi sebagai kumpulan data dan membuat diagram batang animasi.

Untuk melakukan ini, kita perlu melakukan langkah-langkah berikut -

Step 1 - Apply styles - Terapkan gaya CSS menggunakan pengkodean yang diberikan di bawah ini.

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

Step 2 - Define variables - Mari kita tentukan atribut SVG menggunakan skrip di bawah ini.

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

Step 3 - Append text - Sekarang, tambahkan teks dan terapkan transformasi menggunakan pengkodean di bawah ini.

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- Pada langkah ini, kita dapat membuat rentang skala dan menambahkan elemen grup. Ini didefinisikan di bawah.

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 - Kami telah membuat data.csvmengajukan dalam contoh kami sebelumnya. File yang sama, kami gunakan di sini.

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

Sekarang, baca file di atas menggunakan kode di bawah ini.

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

Step 6 - Set domain - Sekarang, atur domain menggunakan pengkodean di bawah ini.

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- Sekarang, Anda dapat menambahkan sumbu X ke transformasi. Itu ditunjukkan di bawah ini.

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 - Tambahkan sumbu Y ke transformasi menggunakan kode yang diberikan di bawah ini.

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 - Sekarang, tambahkan elemen grup dan terapkan transformasi ke sumbu Y seperti yang ditentukan di bawah ini.

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

Step 10 - Select the bar class - Sekarang, pilih semua elemen di kelas bar seperti yang ditentukan di bawah ini.

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

Di sini, kami menambahkan acara pendengar untuk gerakan mouse dan gerakan mouse untuk melakukan animasi. Ini menerapkan animasi, ketika mouse melayang di atas bilah tertentu dan keluar darinya. Fungsi-fungsi ini dijelaskan pada langkah berikut.

Itu .ease(d3.easeLinear)fungsi digunakan untuk melakukan gerakan semu dalam animasi. Ini memproses gerakan lambat masuk dan keluar dengan durasi 200. Penundaan dapat dihitung dengan menggunakan -

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

Step 11 - Mouseover event handler function - Mari kita membuat pengendali peristiwa gerakan mouse untuk menangani peristiwa mouse seperti yang ditunjukkan di bawah ini.

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

Di sini, dalam acara gerakan mouse, kami ingin meningkatkan lebar dan tinggi batang, dan warna batang dari batang yang dipilih menjadi merah. Untuk warnanya, kami telah menambahkan 'sorotan' kelas, yang mengubah warna bilah yang dipilih menjadi merah.

Fungsi transisi ke bilah selama 200 milidetik. Saat kita menambah lebar bilah sebesar 5px, dan tinggi sebesar 10px, transisi dari lebar dan tinggi bilah sebelumnya ke lebar dan tinggi baru akan berlangsung selama 200 milidetik.

Selanjutnya, kami menghitung nilai 'y' baru ke batang, sehingga batang tidak terdistorsi karena nilai ketinggian baru.

Step 12 - Mouseout event handler function- Mari kita membuat pengendali peristiwa mouseout untuk menangani peristiwa mouse. Ini didefinisikan di bawah.

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

Di sini, di acara mouseout, kami ingin menghapus fitur seleksi yang telah kami terapkan di acara gerakan mouse. Oleh karena itu, kita mengembalikan kelas bar ke kelas 'bar' asli dan mengembalikan lebar dan tinggi asli dari bar yang dipilih dan mengembalikan nilai y ke nilai aslinya.

Itu d3.selectAll(‘.val’).remove() fungsi digunakan untuk menghapus nilai teks yang telah kami tambahkan selama pemilihan bilah.

Step 13 - Working Example- Program lengkap diberikan dalam blok kode berikut. Buat halaman webanimated_bar.html dan tambahkan perubahan berikut ke dalamnya.

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

Sekarang, minta browser dan kita akan melihat respons berikut.

Jika kita memilih bilah apa pun, itu akan disorot dengan warna merah. D3 adalah pustaka visualisasi tujuan umum yang menangani transformasi data menjadi informasi, dokumen, elemen, dll., Dan pada akhirnya membantu dalam membuat visualisasi data.