DC.js - Çizgi Grafik

Düz çizgilerle birbirine bağlanmış bir dizi veri noktası olarak bilgileri görüntülemek için bir çizgi grafiği kullanılır. Bir veri noktası, biri yatay eksen boyunca diğeri dikey eksen boyunca çizilen iki değeri temsil eder. Örneğin, gıda maddelerinin popülaritesi, gıda maddesi x ekseni boyunca temsil edilecek ve popülerliği y ekseni boyunca gösterilecek şekilde bir çizgi grafik olarak çizilebilir. Bu bölümde çizgi grafikleri ayrıntılı olarak açıklanmaktadır.

Çizgi Grafik Yöntemleri

Çizgi grafik çizmeye geçmeden önce şunu anlamalıyız: dc.lineChartsınıf ve yöntemleri. Dc.lineChart, grafik çizmenin temel işlevlerini elde etmek için karışımları kullanır. Dc.lineChart tarafından kullanılan karışımlar aşağıdaki gibidir -

• dc.stackMixin
• dc.coordinateGridMixin

Dc.lineChart'ın tam sınıf diyagramı aşağıdaki gibidir -

Dc.lineChart, yukarıda belirtilen karışımların tüm yöntemlerini alır ve çizgi grafiği çizmek için kendi yöntemlerine sahiptir. Aşağıdaki şekilde açıklanmıştır.

dashStyle ([stil])

Bu yöntem, bir çizgi grafiği için çizgi stilini ayarlamak için kullanılır.

dotRadius ([yarıçap])

Bu yöntem, veri noktalarında görüntülenen noktaların yarıçapını (PX cinsinden) almak veya ayarlamak için kullanılır. Aşağıdaki gibi tanımlanır -

chart.dotRadius = function (radius) {
   if (!arguments.length) {
      return radius;
   }
};

enterpolate ([i])

Bu yöntem, bir hat için enterpolatörü almak veya ayarlamak için kullanılır.

renderArea ([alan])

Bu yöntem, işleme alanını almak veya ayarlamak için kullanılır.

renderDataPoints ([seçenekler])

Bu yöntem, her veri noktası için ayrı noktalar oluşturmak için kullanılır.

gerilim ([gerilim])

Bu yöntem, çizilen çizgiler için gerginliği almak veya ayarlamak için kullanılır. 0 ile 1 aralığındadır.

xyTipsOn ([xyTipsOn])

Bu yöntem, tek bir veri noktasının fare davranışını değiştirmek için kullanılır.

Çizgi Grafik Çizin

DC'de bir çizgi grafik çizelim. Bunu yapmak için aşağıda verilen adımları izlememiz gerekiyor -

Adım 1: Bir değişken tanımlayın

Aşağıda gösterildiği gibi bir değişken tanımlayalım -

var chart = dc.lineChart('#line');

Burada dc.linechart işlevi, bir id line.

2. Adım: Verileri okuyun

Verileri şuradan okuyun: people.csv dosya -

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

Burada, aynı veri kümesini kullandıysak people.csv, örnek veri dosyası aşağıdaki gibi olacaktır -

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

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

3. Adım: Bir yaş boyutu oluşturun

Şimdi, aşağıda gösterildiği gibi yaş için boyut oluşturun -

var ageDimension = mycrossfilter.dimension(function(data) { 
    return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
});

Burada, Crossfilter verilerinden yaşı atadık.

~~ çift NOT bitsel bir operatördür. Daha hızlı bir ikame olarak kullanılır.Math.floor() işlevi.

Şimdi, bunu kullanarak gruplandırın reduceCount() aşağıda tanımlanan işlev -

var ageGroup = ageDimension.group().reduceCount();

4. Adım: Bir grafik oluşturun

Şimdi, aşağıda verilen kodlamayı kullanarak bir çizgi grafik oluşturun -

chart
   .width(800)
   .height(300)
   .x(d3.scale.linear().domain([15,70]))
   .brushOn(false)
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .dimension(ageDimension)
   .group(ageGroup)
   .on('renderlet', function(chart) {
      chart.selectAll('rect').on('click', function(d) {
         console.log('click!', d);
      });
   });

chart.render();

Buraya,

• Grafik genişliği 800 ve yüksekliği 300'dür.

• D3.scale.linear işlevi, belirtilen etki alanı aralığı [15, 70] ile yeni bir doğrusal ölçek oluşturmak için kullanılır.

• Ardından, brushOn false değeri.

• Y ekseni etiketini şu şekilde atarız: count ve x ekseni etiketi age.

• Son olarak, kullanarak yaşı gruplandırın ageGroup.

Adım 5: Çalışma örneği

Tam kod listesi aşağıdaki kod bloğunda gösterilmiştir. Bir web sayfası oluşturunline.html ve aşağıdaki değişiklikleri ekleyin.

<html>
   <head>
      <title>DC.js Line 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 = "line"></div>
      </div>

      <script language = "javascript">
         var chart = dc.lineChart('#line');

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

            var ageDimension = mycrossfilter.dimension(function(data) { 
               return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
            });
            var ageGroup = ageDimension.group().reduceCount();

            chart
               .width(800)
               .height(300)
               .x(d3.scale.linear().domain([15,70]))
               .brushOn(false)
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .dimension(ageDimension)
               .group(ageGroup)
               .on('renderlet', function(chart) {
                  chart.selectAll('rect').on('click', function(d) {
                     console.log('click!', d);
                  });
               });
            chart.render();
         });
      </script>
   </body>
</html>

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