DC.js - Pasta Grafik

Pasta grafik, dairesel bir istatistiksel grafiktir. Sayısal bir orantı göstermek için dilimlere bölünmüştür. Bu bölüm, DC.js kullanarak bir pasta grafiğin nasıl çizileceğini ayrıntılı olarak açıklamaktadır.

Pasta Grafik Yöntemleri

Bir pasta grafiği çizmeye geçmeden önce, şunu anlamalıyız: dc.pieChartsınıf ve yöntemleri. Dc.pieChart, bir grafik çizmenin temel işlevlerini elde etmek için mixins kullanır. Dc.pieChart tarafından kullanılan karışımlar aşağıdaki gibidir -

baseMixin
capMixin
colorMixin

Bir dc.pieChart'ın tam sınıf diyagramı aşağıdaki gibidir -

Dc.pieChart, yukarıda belirtilen karışımların tüm yöntemlerini alır ve ayrıca pasta grafiğini özel olarak çizmek için kendi yöntemlerine sahiptir. Bunlar aşağıdaki gibidir -

cx ([cx])
drawPaths ([yol])
emptyTitle ([başlık])
externalLabels ([etiket])
innerRadius ([interiorRadius])
minAngleForLabel ([minAngleForLabel])
yarıçap ([yarıçap])
dilimlerCap ([kapak])

Bunların her birini ayrıntılı olarak tartışalım.

cx ([cx])

Aşağıda tanımlanan merkez x koordinat konumunu almak veya ayarlamak için kullanılır -

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

Benzer şekilde, y koordinat konumunu gerçekleştirebilirsiniz.

drawPaths ([yol])

Bu yöntem, bir pasta grafik için yollar çizmek için kullanılır ve aşağıda tanımlanmıştır -

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

emptyTitle ([başlık])

Bu yöntem, veri olmadığında başlığı ayarlamak için kullanılır. Aşağıda tanımlanmıştır -

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

externalLabels ([etiket])

Dilim etiketlerini grafiğin dış kenarından ofset olarak konumlandırmak için kullanılır. Aşağıda tanımlanmıştır -

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

innerRadius ([interiorRadius])

Bu yöntem, pasta grafiğin iç yarıçapını almak veya ayarlamak için kullanılır. İç yarıçap daha büyükse0px, daha sonra pasta grafik halka grafik olarak işlenecektir. Aşağıda tanımlanmıştır -

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

minAngleForLabel ([minAngleForLabel])

Bu yöntem, etiket oluşturma için minimum dilim açısını elde etmek veya ayarlamak için kullanılır. Aşağıda tanımlanmıştır -

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

yarıçap ([yarıçap])

Bu yöntem, dış yarıçapı elde etmek veya ayarlamak için kullanılır. Yarıçap belirtilmezse, minimum grafik genişliğinin ve yüksekliğinin yarısını alacaktır. Aşağıda tanımlanmıştır -

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

dilimlerCap ([kapak])

Pasta grafiğin oluşturacağı maksimum dilim sayısını alır veya ayarlar. En üst dilimler yüksekten düşüğe doğru bir değerle belirlenir. Başlığı aşan diğer dilimler tek bir "Diğerleri" dilimine sarılacaktır.

Pasta Grafik Çizin

DC'de bir pasta grafik oluşturalım. Bu pasta grafik örneğinde, adlı bir veri kümesini alalım.people.csvdosya. Örnek veri dosyası aşağıdaki gibidir -

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

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

Yukarıdaki örnek birçok kayıt içermektedir. Aşağıdaki bağlantıya tıklayarak dosyayı indirebilir ve DC konumuna kaydedebilirsiniz.

people.csv

Şimdi, DC'de bir pasta grafik çizmek için aşağıdaki adımlara uyalım.

1. Adım: Bir Komut Dosyası ekleyin

Aşağıdaki kodu kullanarak D3, DC ve Crossfilter ekleyelim -

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

Adım 2: Bir Değişken Tanımlayın

Bir tür nesne oluşturun, dc.pieChart aşağıda gösterildiği gibi -

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

Burada, Pasta kimliği bir pasta ile eşleştirilir.

3. Adım: Verileri Okuyun

Verilerinizi (örneğin, people.csv'den) okuyun. d3.csv()işlevi. Aşağıdaki gibi tanımlanır -

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

Burada, veri dosyası belirtilen konumda mevcut değilse, d3.csv () işlevi bir hata döndürür.

Adım 4: Çapraz Filtreyi Tanımlayın

Crossfilter için bir değişken tanımlayın ve verileri Crossfilter'e atayın. Aşağıda tanımlanmıştır -

var mycrossfilter = crossfilter(people);

5. Adım: Boyut Oluşturun

Aşağıdaki işlevi kullanarak cinsiyet için bir boyut oluşturun -

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

Burada boyut için insanların Cinsiyeti kullanılır.

6. Adım: lessCount ()

Group () ve lessCount () fonksiyonunu yukarıda oluşturulan cinsiyet boyutuna uygulayarak bir Çapraz Filtre grubu oluşturun groupDimension.

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

7. Adım: Pasta Oluşturun

Aşağıdaki işlevi kullanarak pastayı oluşturun -

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

Buraya,

Pasta grafiğin genişliği 800 olarak ayarlandı.
Pasta grafiğin yüksekliği 300 olarak ayarlandı.
Pasta grafiğin boyutu şu şekilde ayarlandı: genderDimension boyut () yöntemini kullanarak.
Pasta grafik grubu şu şekilde ayarlandı: genderGroup group () yöntemini kullanarak.
DC.js yerleşik etkinliğini kullanarak verileri günlüğe kaydetmek için bir tıklama etkinliği eklendi, renderlet(). Renderlet, grafik her oluşturulduğunda veya çizildiğinde çağrılır.

Adım 8: Çalışma Örneği

Yeni bir html dosyası, pie.html oluşturun ve yukarıdaki tüm adımları aşağıda gösterildiği gibi ekleyin -

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

Şimdi, tarayıcıyı isteyin ve aşağıdaki yanıtı göreceğiz.