DC.js - Bileşik Grafik

Bileşik grafik, DC.js tarafından sağlanan özel bir grafik türüdür. Aynı koordinat ızgarasında birden çok grafiği oluşturma seçeneği sunar. Bileşik grafik, minimum kod satırı ile gelişmiş grafik görselleştirme seçenekleri sağlar.

Bileşik Grafik Yöntemleri

Bileşik bir grafik çizmeye geçmeden önce, şunu anlamamız gerekir: dc.compositeChartsınıf ve yöntemleri. Dc.compositeChart, bir grafik çizmenin temel işlevlerini elde etmek için karışımları kullanır. Dc.compositeChart tarafından kullanılan karışımlar aşağıdaki gibidir -

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

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

Dc.compositeChart, yukarıda belirtilen karışımların tüm yöntemlerini alır. Aşağıda açıklanan bileşik grafiği çizmek için kendi yöntemi vardır -

oluştur ([subChartArray])

Aynı koordinat ızgarası grafiğinde oluşturulacak grafikler koleksiyonunu ayarlayın.

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

çocuklar ()

Aynı koordinat ızgarasında oluşturulan tüm grafikleri alır.

childOptions ([childOptions])

Aynı koordinat ızgarasında oluşturulan tüm alt grafikler için grafik seçeneklerini alır veya ayarlar.

shareTitle ([shareTitle])

Grafiğin paylaşılan başlığını alır veya ayarlar. Ayarlanırsa, aynı koordinat ızgarasında oluşturulan tüm alt haritalar ile paylaşılacaktır.

shareColors ([shareColors])

ShareTitle () işlevine benzer, tek farkı başlık yerine renkleri paylaşmasıdır.

rightY ([yScale])

Bileşik grafiğin sağ ekseni için y ölçeğini alır veya ayarlar.

sağAxis ([sağYAxis])

Bileşik grafiğin sağ y eksenini alır veya ayarlar.

rightYAxisLabel (sağYAxisLabel [??])

Sağ y ekseni etiketini alır veya ayarlar.

alignYAxes ([alignYAxes])

Sol ve sağ y ekseni arasındaki hizalamayı alır veya ayarlar.

useRightAxisGridLines ([useRightAxisGridLines])

Bileşik grafiğin sağ y ekseninden kılavuz çizgileri çizilip çizilmeyeceğini alır veya ayarlar. Varsayılan davranış, sol y ekseninden çizim yapmaktır.

Bileşik Grafik Çizin

DC.js kullanarak bileşik bir grafik çizelim. Bunu yapmak için aşağıda verilen adımları izlemeliyiz -

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

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

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

Burada, dc.compositeChart işlevi, aşağıdaki özelliklere sahip bir kapsayıcıyla eşlenir: composite kimliği olarak.

2. Adım: Verileri okuyun

People.csv dosyasındaki verileri okuyun -

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

Veri yoksa, bir hata verir. Aynı people.csv dosyasını kullanacağız. Ö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

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

3. Adım: Verileri eşleyin

Şimdi, verileri aşağıda gösterildiği gibi eşleştirin -

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

Burada, Crossfilter verilerinden yaşı atadık. ~~ çift NOT bitsel bir operatördür. Daha hızlı bir ikame olarak kullanılır.

Şimdi, yaş boyutunu uygulayın ve cinsiyet verilerini aşağıda verilen kodlamayı kullanarak gruplayın -

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

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

4. Adım: Bir grafik oluşturun

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

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

Buraya,

Grafik genişliği 768 ve yüksekliği 480'dir.
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.
Yaş olarak bir x ekseni etiketi ve sayı olarak y ekseni etiketi atarız.
Ardından, yatay ızgara çizgilerini doğru yapın.
Erkek cinsiyet için kırmızı ve kadın için mavi olmak üzere çizgi grafik renkleri değerini oluşturun.
Son olarak, brushOn değerini false olarak ayarlayıp grafiği oluşturuyoruz.

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

Kodun tamamı aşağıdaki gibidir. Bir web sayfası oluşturuncomposite.html ve aşağıdaki değişiklikleri ekleyin.

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

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