DC.js - baseMixin

baseMixinherhangi bir grafik türü oluşturmak için gereken temel yöntemleri sağlar. Grafiğin genişliğini ayarlamaktan grafiğin gelişmiş filtrelemesine kadar değişir.

Genel Harita Seçenekleri

basicMixingrafiklerin özelliklerini almak / ayarlamak için birçok grafik yöntemi sağlar. Bunlar aşağıdaki gibidir,

chartID() - Grafiğin dahili sayısal kimliğini döndürür.
chartGroup( [chartGroup])- Grafiğin ait olduğu grubu alır veya ayarlar. DC.js'de, grafikler tek bir küme halinde gruplanabilir. Bir gruptaki tüm grafiklerin aynı Crossfilter veri kümesini paylaşması beklenir. Aynı anda hem render edilir hem de yeniden çizilir.

mychart.chartGroup('dashboard');

minWidth( [minWidth]) - Grafiğin minimum genişliğini ayarlar.

mychart.minWidth(300);

width( [width]) - Grafiğin genişliğini alır veya ayarlar.

mychart.width(600);

minHeight( [minHeight]) - Grafiğin minimum yüksekliğini alır veya ayarlar.

mychart.minHeight(300);

height( [height]) - Grafiğin yüksekliğini alır veya ayarlar.

mychart.height(300);

title( [titleFunction])- Başlık işlevini alır veya ayarlar. Başlık, SVG Öğesinin grafikteki alt öğenin başlığıdır (örneğin, bir çubuk grafikte tek bir çubuk). Grafiklerdeki başlık, tarayıcıda araç ipucu olarak gösterilir.

mychart.title(function(data) { 
   return d.key + ': ' + d.value; 
});

label( labelFunction[??]) - title () yöntemine benzer, ancak başlık yerine etiketi ayarlar.

mychart.label(function(data) { 
   return d.key + ': ' + d.value; 
});

options(opts)- JavaScript nesnesini kullanarak herhangi bir grafik seçeneğini ayarlar. Her anahtar, grafiklerde bulunan karşılık gelen yöntemi temsil eder ve eşleşen yöntem, ilgili değerle çağrılır.

mychart.options ({
   'width' : 300,
   'height' : 300
});

Burada, width () ve height () yöntemi belirtilen değerle tetiklenecektir.

legend( [legend])- Grafiğe bir açıklama ekler. Efsane,d3.legend() yöntem.

mychart.legend (
   dc.legend()
      .x(500)
      .y(50)
      .itemHeight(12)
      .gap(4))

anchor( parent[??])- SVGElement kökünü, mevcut bir grafiğin kökü veya herhangi bir geçerli D3 tek seçicisi olacak şekilde ayarlar. İsteğe bağlı olarak, grafik grubu ikinci bağımsız değişken kullanılarak da ayarlanabilir.
anchorName() - Grafiğin bağlantılı konumunun DOM Kimliğini alır.
svg( [svgElement]) - Grafiğin SVGElement değerini döndürür.
resetSvg() - DOM'daki SVG kabını sıfırlar.
root( [rootElement]) - Grafiğin kök kabını alır.

Veri Seçenekleri

basicMixingrafikler için verileri ayarlamak için yöntemler sağlar. Veriler, Çapraz filtre boyutu ve grubu olarak ayarlanır. Ek olarak, temel veri setini alma seçeneği sunar.

dimension( [dimension])- Grafiğin boyutunu ayarlar veya alır. Boyut, herhangi bir geçerli Çapraz Filtre boyutudur.

var mycrossfilter = crossfilter([]);
var ageDimension = mycrossfilter.dimension(dc.pluck('age'));
mychart.dimension(ageDimension);

group( group[??])- Grafiğin grubunu ayarlar veya alır. Grup, herhangi bir geçerli Çapraz Filtre grubudur. Grup, daha sonra kodda kullanmak için ikinci bağımsız değişken kullanılarak adlandırılabilir.

var mycrossfilter = crossfilter([]);
var ageDimension = mycrossfilter.dimension(dc.pluck('age'));
mychart.dimension(ageDimension);
mychart.group(ageDimension.group(crossfilter.reduceCount()));

data( [callback]) - Veri geri aramasını ayarlar ve temel alınan grafiğin veri kümesini almamızı sağlar.

// get all groups
mychart.data(function (group) { 
   return group.all(); 
});

// get top five groups
mychart.data(function (group) { 
   return group.top(5); 
});

keyAccessor( [keyAccessor])- Anahtar erişimci işlevini alır veya ayarlar. Anahtarı temeldeki Çapraz Filtre grubundan almak için kullanılır. Anahtar, bir pasta grafiğindeki dilimler ve çizgi / çubuk grafikteki x ekseni için kullanılır. Varsayılankey accessor işlev aşağıdaki gibidir -

chart.keyAccessor(function(d) { return d.key; });

valueAccessor( [valueAccessor])- Değer erişimci işlevini alır veya ayarlar. Altta yatan Çapraz Filtre grubundan değeri almak için kullanılır. Değer, pasta grafiğindeki dilim boyutu ve çizgi / çubuk grafikteki y ekseni konumu için kullanılır. Varsayılanvalue accessor işlev aşağıdaki gibidir -

chart.valueAccessor(function(d) { return d.value; });

ordering( [orderFunction])- Sıralı boyutu sıralamak için bir sıralama işlevi alır veya ayarlar. Varsayılan olarak, bir grafik kullanırcrossfilter.quicksort.by öğeleri sıralamak için.

_chart.ordering(dc.pluck('key'));

Filtre seçenekleri

Filtreleme, DC.js'nin öne çıkan özelliklerinden biridir. Filter () yöntemini kullanarak bir veya daha fazla filtreyi doğrudan grafik nesnesine uygulayabilir ve grafik üzerindeki filtreleme etkisini görmek için grafiğin redrawGroup () veya dc.redrawAll () yöntemini çağırabiliriz. Varsayılan olarak, bir grafik nesnesi filter () yöntemini kullanarak bir veya daha fazla filtre alır, bunu temeldeki Crossfilter () veri kümesine uygular, filtrelenmiş verileri Crossfilter'dan alır ve filtrelenmiş verileri kullanarak grafikleri yeniden çizer. DC.js, grafikte filtrelemeyi işlemek için aşağıdaki yöntemleri sağlar.

Filtrele ([filtre])

Grafik için filtreyi alır veya ayarlar. Sağlanan filtre yeniyse, grafiğin filtre koleksiyonuna eklenecek ve temel alınan veri kümesine uygulanacaktır. Sağlanan filtre, grafiğin filtre koleksiyonunda zaten mevcutsa, filtreyi kaldıracak ve temel alınan veriler üzerinde ilgili filtrelemeyi gerçekleştirecektir. Kısaca, filtre yöntemi sağlanan filtreleri değiştirecektir.

mychart.filter(10);

Tüm filtreleri kaldırmak için filtre yöntemini çağırın nulldeğer. Filtre, aşağıdaki öğelerden herhangi biri olabilir -

null - Grafik önceden uygulanan tüm filtreleri kaldıracaktır.
single value - Grafik, temeldeki Çapraz Filtrenin filtre yöntemini çağırır ve sağlanan değeri gönderir.
dc.filters.RangedFilter- Düşük ve yüksek olmak üzere iki değeri kabul eder. Grafik, düşük ve yüksek değer arasındaki değer dışındaki tüm verileri filtreleyecektir.
dc.filters.TwoDimensionalFilter - Isı haritasında kullanılan iki boyutlu değerleri kabul eder.
dc.filters.RangedTwoDimensionalFilter - Yalnızca dağılım grafiklerinde kullanılan iki boyutlu bir değeri kabul etmesi dışında, dc.filters.RangedFilter'a benzer.

hasFilter ([filtre])

Verilen filtrenin çizelgede mevcut olup olmadığını kontrol eder.

replaceFilter ([filtre])

Tablonun mevcut filtresini sağlanan filtre ile değiştirir.

filtreler ()

Grafikle ilişkili tüm mevcut filtreleri döndürür.

filterAll ()

Grafikle ilişkili tüm filtreleri temizler.

filterHandler ([filterHandler])

Bir filtre işleyici işlevi alır veya ayarlar. Filtre işleyici işlevi, filtreyi kullanarak temel alınan veri kümesini filtrelemek için grafik tarafından kullanılır. Grafiğin Varsayılan Filtre İşleyici İşlevi vardır ve bu yöntem kullanılarak Özel Filtre İşleyici İşlevi ile değiştirilebilir. Varsayılan filtre işleyicisi aşağıdaki gibidir -

chart.filterHandler(function (dimension, filters) {
   if (filters.length === 0) {
      
      // the empty case (no filtering)
      dimension.filter(null);
   } else if (filters.length === 1 && !filters[0].isFiltered) {
      
      // single value and not a function-based filter
      dimension.filterExact(filters[0]);
   } else if (filters.length === 1 && filters[0].filterType === 'RangedFilter') {
      
      // single range-based filter
      dimension.filterRange(filters[0]);
   } else {
      
      // an array of values, or an array of filter objects
      dimension.filterFunction(function (d) {
         
         for (var i = 0; i < filters.length; i++) {
            var filter = filters[i];
               
            if (filter.isFiltered && filter.isFiltered(d)) {
               return true;
            } else if (filter <= d && filter >= d) {
               return true;
            }
         }
         return false;
      });
   }
   return filters;
});

hasFilterHandler ([hasFilterHandler])

Has-filter işleyici işlevini alır veya ayarlar. Bu fonksiyon, grafik tarafından, grafiğin filtre koleksiyonunda bir filtrenin bulunup bulunmadığını kontrol etmek için kullanılır. Varsayılan has-filter işleyicisi aşağıdaki gibidir -

chart.hasFilterHandler(function (filters, filter) {
   if (filter === null || typeof(filter) === 'undefined') {
      return filters.length > 0;
   }
   
   return filters.some(function (f) {
      return filter <= f && filter >= f;
   });
});

addFilterHandler ([addFilterHandler])

Ek filtre işleyici işlevini alır veya ayarlar. Bu işlev, filtreyi grafiğin filtre koleksiyonuna eklemek için grafik tarafından kullanılır. Varsayılan eklenti filtresi işleyicisi aşağıdaki gibidir -

chart.addFilterHandler(function (filters, filter) {
   filters.push(filter);
   return filters;
});

removeFilterHandler ([removeFilterHandler])

Kaldır-filtre işleyici işlevini alır veya ayarlar. Bu işlev, grafik tarafından filtreyi grafiğin filtre koleksiyonundan kaldırmak için kullanılır. Varsayılan kaldırma filtresi aşağıdaki gibidir -

chart.removeFilterHandler(function (filters, filter) {
   for (var i = 0; i < filters.length; i++) {
      
      if (filters[i] <= filter && filters[i] >= filter) {
         filters.splice(i, 1);
         break;
      }
      
   }
   return filters;
});

resetFilterHandler ([resetFilterHandler])

Reset-filter handler işlevini alır veya ayarlar. Bu fonksiyon, grafik tarafından grafiğin filtre koleksiyonunu sıfırlamak için kullanılır. Varsayılan sıfırlama filtresi aşağıdaki gibidir -

function (filters) {
   return [];
}

filterPrinter ([filterPrinterFunction])

Yazıcı filtresi işlevini alır veya ayarlar. Bu işlev, filtre bilgilerini yazdırmak için tablo tarafından kullanılır.

commitHandler ()

Commit işleyicisini alır veya ayarlar. Kaydetme işleyicisinin amacı, filtrelenmiş verileri sunucuya eşzamansız olarak göndermektir.

Etkinlik Seçenekleri

DC.js, Filtreleme, Yakınlaştırma vb. Gibi bazı işlevleri gerçekleştirmek için sınırlı bir olay kümesini tanımlar. DC.js'de tanımlanan olayların listesi aşağıdaki gibidir -

renderlet - Geçişler yeniden çizilip oluşturulduktan sonra tetiklenir.
pretransition - Geçişler başlamadan kovuldu.
preRender - Grafik oluşturmadan önce tetiklendi.
postRender - Tüm renderlet mantığını içeren grafik render işlemi tamamlandıktan sonra tetiklenir.
preRedraw - Çizelge yeniden çizilmeden önce ateşlendi.
postRedraw - Tüm renderlet mantığını içeren grafik yeniden çizimi bitirdikten sonra çalıştırılır.
filtered - Bir filtre uygulandıktan, eklendikten veya kaldırıldıktan sonra tetiklenir.
zoomed - Bir yakınlaştırma tetiklendikten sonra tetiklendi.

basicMixin bir yöntem sağlar, on(event, listener) yukarıda tanımlanan olayların tümü için geri arama işlevini ayarlamak için.

on(event, listener) - Belirli bir olay için geri arama veya dinleyici işlevini ayarlar.
onClick(datum)- Her grafik için onClick işleyicisi olarak D3'e aktarılır. Varsayılan davranış, tıklanan veriyi filtrelemek (geri aramaya iletilir) ve grafik grubunu yeniden çizmektir.

Oluşturma Seçenekleri

BasicMixin, grafikleri işlemek için bir yöntem listesi sağlar. Grafiği çizmek için kullanılırlar ve aşağıdaki gibidirler -

render()- Grafiği işler. Genellikle grafik çizildiğinde ilk olarak kullanılacaktır.
renderGroup() - Gruptaki tüm grafikleri bu grafiğin ait olduğu şekilde işler.
renderLabel( [renderLabel]) - Etiket oluşturmayı açar / kapatır.
renderTitle( [renderTitle]) - Başlık oluşturmayı açar / kapatır.
redraw() - Tüm tabloyu yeniden çizer.
redrawGroup() - Bu grafiğin ait olduğu gruptaki tüm grafikleri yeniden çizer.

Geçiş Seçenekleri

BasicMixin, grafiğin geçiş etkisini ayarlamak için yöntemler sağlar ve bunlar aşağıdaki gibidir -

transitionDelay( [delay]) - Bu grafik örneği için animasyon geçiş gecikmesini (milisaniye cinsinden) ayarlar veya alır.
transitionDuration( [duration]) - Bu grafik örneği için animasyon geçiş süresini (milisaniye cinsinden) ayarlar veya alır.
useViewBoxResizing( [useViewBoxResizing]) - Ayarlanırsa, grafiği SVG görünüm kutusu niteliklerine göre yeniden boyutlandırır.
controlsUseVisibility( [controlsUseVisibility]) - ayarlanmışsa, bir grafik sıfırlama ve filtre kontrollerini göstermek / gizlemek için display özelliği yerine görünürlük özelliğini kullanır.

Bir sonraki bölümde capMixin'i anlayacağız.