DC.js - Grafik Komposit

Bagan komposit adalah jenis bagan khusus yang disediakan oleh DC.js. Ini memberikan opsi untuk membuat beberapa bagan dalam kisi koordinat yang sama. Bagan komposit memungkinkan opsi visualisasi bagan lanjutan dengan baris kode minimum.

Metode Grafik Komposit

Sebelum melanjutkan menggambar grafik komposit, kita perlu memahami dc.compositeChartkelas dan metodenya. Dc.compositeChart menggunakan mixin untuk mendapatkan fungsionalitas dasar menggambar bagan. Mixins yang digunakan oleh dc.compositeChart adalah sebagai berikut -

dc.baseMixin
dc.marginMixin
dc.colorMixin
dc.coordinateGridMixin

Diagram kelas lengkap dari dc.barChart adalah sebagai berikut -

Dc.compositeChart mendapatkan semua metode dari mixin yang ditentukan di atas. Ini memiliki metode sendiri untuk menggambar grafik komposit, yang dijelaskan di bawah ini -

tulis ([subChartArray])

Atur koleksi grafik yang akan ditampilkan dalam grafik grid koordinat yang sama.

chart.compose([
   dc.lineChart(chart)
   dc.barChart(chart)
]);

anak-anak ()

Mendapatkan semua bagan yang disusun dalam kisi koordinat yang sama.

childOptions ([childOptions])

Mendapat atau menyetel opsi bagan untuk semua bagan anak yang disusun dalam kisi koordinat yang sama.

shareTitle ([shareTitle])

Mendapat atau menetapkan judul bagan bersama. Jika disetel, itu akan dibagikan dengan semua bagan anak yang disusun dalam kisi koordinat yang sama.

shareColors ([shareColors])

Mirip dengan fungsi shareTitle (), kecuali fungsi ini membagikan warna, bukan judul.

rightY ([yScale])

Mendapat atau menyetel skala y untuk sumbu kanan bagan komposit.

kananYAxis ([rightYAxis])

Mendapat atau menyetel sumbu y kanan dari bagan komposit.

rightYAxisLabel (rightYAxisLabel [??])

Mendapat atau menyetel label sumbu y kanan.

alignYAxes ([alignYAxes])

Mendapat atau menyetel perataan antara sumbu y kiri dan kanan.

useRightAxisGridLines ([useRightAxisGridLines])

Mendapat atau menyetel apakah akan menggambar garis kisi dari sumbu y kanan bagan komposit. Perilaku defaultnya adalah menggambar dari sumbu y kiri.

Gambar Bagan Komposit

Mari kita menggambar grafik komposit menggunakan DC.js. Untuk melakukan ini, kita harus mengikuti langkah-langkah yang diberikan di bawah ini -

Langkah 1: Tentukan variabel

Mari kita tentukan variabel grafik seperti yang ditunjukkan di bawah ini -

var chart = dc.compositeChart('#compoiste');

Di sini, fungsi dc.compositeChart dipetakan dengan wadah yang memiliki composite sebagai id-nya.

Langkah 2: Baca datanya

Membaca data dari file people.csv -

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

Jika data tidak ada, maka itu mengembalikan kesalahan. Kami akan menggunakan file people.csv yang sama. 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

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

Langkah 3: Petakan data

Sekarang, petakan data seperti yang ditunjukkan di bawah ini -

var ndx = crossfilter();

ndx.add(people.map(function(data) {
   return {
      age: ~~((Date.now() - new Date(data.DOB)) / (31557600000)),
      male: data.gender == 'Male' ? 1 : 0,
      female: data.gender == 'Male' ? 0 : 1
   };
}));

Di sini, kami menetapkan usia dari data Crossfilter. ~~ adalah operator bitwise double NOT. Ini digunakan sebagai pengganti yang lebih cepat.

Sekarang, terapkan usia dimensi dan kelompokkan data jenis kelamin menggunakan kode yang diberikan di bawah ini -

var dim  = ndx.dimension(dc.pluck('age')),

grp1 = dim.group().reduceSum(dc.pluck('male')),
grp2 = dim.group().reduceSum(dc.pluck('female'));

Langkah 4: Buat grafik

Sekarang, buat grafik komposit menggunakan pengkodean yang diberikan di bawah ini -

composite
   .width(768)
   .height(480)
   .x(d3.scale.linear().domain([15,70]))
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
   .renderHorizontalGridLines(true)
   .compose ([
      dc.lineChart(composite)
         .dimension(dim)
         .colors('red')
         .group(grp1, "Male")
         .dashStyle([2,2]),
      dc.lineChart(composite)
         .dimension(dim)
         .colors('blue')
         .group(grp2, "Female")
         .dashStyle([5,5])
   ])
   
.brushOn(false)
.render();

Sini,

Lebar bagan 768 dan tinggi 480.
Fungsi d3.scale.linear digunakan untuk membangun skala linier baru dengan rentang domain yang ditentukan [15, 70].
Kami menetapkan label sumbu x sebagai usia dan label sumbu y sebagai hitungan.
Selanjutnya, render garis kisi horizontal sebagai true.
Buat nilai warna diagram garis - merah untuk jenis kelamin laki-laki dan biru untuk perempuan.
Terakhir, kami menyetel nilai brushOn ke false dan membuat bagan.

Langkah 5: Contoh kerja

Kode lengkapnya adalah sebagai berikut. Buat halaman webcomposite.html dan tambahkan perubahan berikut ke dalamnya.

<html>
   <head>
      <title>DC composite chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.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 = "composite"></div>
      </div>

      <script type = "text/javascript">
         var composite = dc.compositeChart("#composite");

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

            ndx.add(people.map(function(data) {
               return {
                  age: ~~((Date.now() - new Date(data.DOB)) / (31557600000)),
                  male: data.gender == 'Male' ? 1 : 0,
                  female: data.gender == 'Male' ? 0 : 1
               };
            }));

            var dim  = ndx.dimension(dc.pluck('age')),

            grp1 = dim.group().reduceSum(dc.pluck('male')),
            grp2 = dim.group().reduceSum(dc.pluck('female'));

            composite
               .width(768)
               .height(480)
               .x(d3.scale.linear().domain([15,70]))
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
               .renderHorizontalGridLines(true)
               .compose ([
                  dc.lineChart(composite)
                  .dimension(dim)
                  .colors('red')
                  .group(grp1, "Male")
                  .dashStyle([2,2]),
                  dc.lineChart(composite)
                     .dimension(dim)
                     .colors('blue')
                     .group(grp2, "Female")
                     .dashStyle([5,5])
               ])
               .brushOn(false)
               .render();
         });
      </script>
   </body>
</html>

Sekarang, minta browser dan kita akan melihat respons berikut.