DC.js - Bagan Pai

Diagram lingkaran adalah grafik statistik melingkar. Ini dibagi menjadi beberapa irisan untuk menunjukkan proporsi numerik. Bab ini menjelaskan cara menggambar diagram lingkaran menggunakan DC.js secara detail.

Metode Diagram Lingkaran

Sebelum melanjutkan menggambar diagram lingkaran, kita harus memahami dc.pieChartkelas dan metodenya. Dc.pieChart menggunakan mixin untuk mendapatkan fungsionalitas dasar menggambar bagan. Mixins yang digunakan oleh dc.pieChart adalah sebagai berikut -

baseMixin
capMixin
colorMixin

Diagram kelas lengkap dari dc.pieChart adalah sebagai berikut -

Dc.pieChart mendapatkan semua metode dari mixin yang ditentukan di atas serta memiliki metode sendiri untuk menggambar diagram lingkaran secara khusus. Mereka adalah sebagai berikut -

cx ([cx])
drawPaths ([path])
emptyTitle ([judul])
externalLabels ([label])
innerRadius ([innerRadius])
minAngleForLabel ([minAngleForLabel])
radius ([radius])
slicesCap ([cap])

Mari kita bahas masing-masing secara rinci.

cx ([cx])

Ini digunakan untuk mendapatkan atau mengatur posisi koordinat x tengah, yang ditentukan di bawah ini -

chart.cx = function (cx) {
   if (!arguments.length) {
      return (_cx ||  _chart.width() / 2);
   }
};

Demikian pula, Anda dapat melakukan posisi koordinat y.

drawPaths ([path])

Metode ini digunakan untuk menggambar jalur untuk diagram lingkaran dan didefinisikan di bawah ini -

chart.drawPaths = function (path) {
   if (arguments.length === 0) {
      return path;
   }
};

emptyTitle ([judul])

Metode ini digunakan untuk mengatur judul bila tidak ada data. Ini didefinisikan di bawah -

chart.emptyTitle = function (title) {
   if (arguments.length === 0) {
      return title;
   }
};

externalLabels ([label])

Ini digunakan untuk memosisikan label potongan diimbangi dari tepi luar bagan. Ini didefinisikan di bawah -

chart.externalLabels = function (label) {
   if (arguments.length === 0) {
      return label;
   } 
};

innerRadius ([innerRadius])

Metode ini digunakan untuk mendapatkan atau menetapkan radius bagian dalam diagram lingkaran. Jika jari-jari dalam lebih besar dari0px, maka diagram lingkaran akan ditampilkan sebagai diagram donat. Ini didefinisikan di bawah -

_chart.innerRadius = function (innerRadius) {
   if (!arguments.length) {
      return _innerRadius;
   }
};

minAngleForLabel ([minAngleForLabel])

Metode ini digunakan untuk mendapatkan atau mengatur sudut potongan minimal untuk perenderan label. Ini didefinisikan di bawah -

_chart.minAngleForLabel = function (minAngleForLabel) {
   if (!arguments.length) {
      return _minAngleForLabel;
   }
   _minAngleForLabel = minAngleForLabel;
   return _chart;
};

radius ([radius])

Metode ini digunakan untuk mendapatkan atau mengatur radius terluar. Jika radius tidak ditentukan, maka dibutuhkan setengah dari lebar dan tinggi grafik minimum. Ini didefinisikan di bawah -

_chart.radius = function (radius) {
   if (!arguments.length) {
      return _givenRadius;
   }
   _givenRadius = radius;
   return _chart;
};

slicesCap ([cap])

Mendapat atau menyetel jumlah irisan maksimum yang akan dihasilkan diagram lingkaran. Irisan teratas ditentukan oleh nilai dari tinggi ke rendah. Irisan lain yang melebihi tutupnya akan digulung menjadi satu irisan 'Lainnya'.

Gambarlah Diagram Lingkaran

Mari kita buat diagram lingkaran di DC. Dalam contoh diagram lingkaran ini, mari kita ambil kumpulan data bernamapeople.csvmengajukan. Contoh file data adalah sebagai berikut -

id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay

....................
....................
....................

Contoh di atas mengandung banyak catatan. Anda dapat mengunduh file dengan mengklik tautan berikut dan menyimpannya ke lokasi DC.

people.csv

Sekarang, mari kita ikuti langkah-langkah berikut untuk menggambar diagram lingkaran di DC.

Langkah 1: Sertakan Script

Mari kita tambahkan D3, DC dan Crossfilter menggunakan kode berikut -

<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>

Langkah 2: Tentukan Variabel

Buat objek bertipe, dc.pieChart seperti yang ditunjukkan di bawah ini -

var pieChart = dc.pieChart('#pie');

Di sini, ID pai dipetakan dengan pai.

Langkah 3: Baca Data

Baca data Anda (misalnya, dari people.csv) menggunakan file d3.csv()fungsi. Ini didefinisikan sebagai berikut -

d3.csv("data/people.csv", function(errors, people) {
   console.log(people);
}

Di sini, jika file data tidak tersedia di lokasi yang ditentukan, maka fungsi d3.csv () mengembalikan kesalahan.

Langkah 4: Tentukan Crossfilter

Tentukan variabel untuk Crossfilter dan tetapkan data ke Crossfilter. Ini didefinisikan di bawah -

var mycrossfilter = crossfilter(people);

Langkah 5: Buat Dimensi

Buat dimensi untuk gender menggunakan fungsi di bawah ini -

var genderDimension = mycrossfilter.dimension(function(data) { 
   return data.gender; 
});

Di sini, Gender masyarakat digunakan untuk dimensi.

Langkah 6: reduceCount ()

Buat grup Crossfilter dengan menerapkan fungsi group () dan reduceCount () pada dimensi gender yang dibuat di atas - groupDimension.

var genderGroup = genderDimension.group().reduceCount();

Langkah 7: Hasilkan Pie

Hasilkan pai menggunakan fungsi di bawah ini -

pieChart
   .width(800)
   .height(300)
   .dimension(genderDimension)
   .group(genderGroup)
   .on('renderlet', function(chart) {
      chart.selectAll('rect').on('click', function(d) {
         console.log('click!', d);
      });
   });

dc.renderAll();

Sini,

Lebar diagram lingkaran disetel ke 800.
Ketinggian diagram lingkaran disetel ke 300.
Dimensi diagram lingkaran disetel ke genderDimension menggunakan metode dimensional ().
Grup diagram lingkaran diatur ke genderGroup menggunakan metode group ().
Menambahkan peristiwa klik untuk mencatat data menggunakan peristiwa bawaan DC.js, renderlet(). Renderlet dipanggil, setiap kali bagan dibuat atau digambar.

Langkah 8: Contoh Kerja

Buat file html baru, pie.html dan sertakan semua langkah di atas seperti yang ditunjukkan di bawah ini -

<html>
   <head>
      <title>DC.js Pie Chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div id = "pie"></div>
      </div>

      <script language = "javascript">
         var pieChart = dc.pieChart('#pie');

         d3.csv("data/people.csv", function(errors, people) {
            console.log(people);
            var mycrossfilter = crossfilter(people);

            // gender dimension
            var genderDimension = mycrossfilter.dimension(function(data) { 
               return data.gender; 
            });
            var genderGroup = genderDimension.group().reduceCount();

            pieChart
               .width(800)
               .height(300)
               .dimension(genderDimension)
               .group(genderGroup)
               .on('renderlet', function(chart) {
                  chart.selectAll('rect').on('click', function(d) {
                     console.log('click!', d);
                  });
               });

            dc.renderAll();
         });
      </script>
   </body>
</html>

Sekarang, minta browser dan kita akan melihat respons berikut.