D3.js
  • D3.js Nedir, Ne Değildir?
  • JS Grafik Kütüphaneleri
  • Modüler D3.js
    • D3.js Eklenti Oluşturma
  • Başlangıç
  • Seçiciler
  • Element Biçimlendirme
  • Olaylar (Events)
  • Geçişler ve Animasyonlar
    • Kontrol Fonksiyonları
    • Bir Geçişin Yaşam Döngüsü
  • Ölçekler (Scales)
    • Sürekli Girdili ve Sürekli Çıktılı
    • Sürekli Girdili ve Kesikli Çıktılı
    • Kesikli Girdili ve Gesikli Çıktılı
  • Eksen (Axes)
  • Şekiller (Shapes)
    • Çizgi (line) Oluşturucu
    • Area (alan) Oluşturucu
    • Stack (yığın) Oluşturucu
    • Arc (yay) Oluşturucu
    • Pie (pasta) Oluşturucu
    • Symbols (semboller)
  • Düzenler (Layouts)
    • Tree Layout
    • Cluster Layout
    • Treemap Layout
    • Pack Layout
    • Partition Layout
    • Chord Layout
    • Force Layout
  • Kaynaklar
Powered by GitBook
On this page

Was this helpful?

  1. Ölçekler (Scales)

Sürekli Girdili ve Kesikli Çıktılı

PreviousSürekli Girdili ve Sürekli ÇıktılıNextKesikli Girdili ve Gesikli Çıktılı

Last updated 5 years ago

Was this helpful?

scaleQuantize

Sürekli girdiyi kabul eder ve aralık tarafından tanımlanan birkaç ayrı değer üretir.

var quantizeScale = d3.scaleQuantize()
  .domain([0, 100])
  .range(['lightblue', 'orange', 'lightgreen', 'pink']);

quantizeScale(10);   // returns 'lightblue'
quantizeScale(30);  // returns 'orange'
quantizeScale(90);  // returns 'pink'

Her aralık değeri, yukarıdaki örnekte olduğu gibi, etki alanında eşit boyutta bir yığınla eşleştirilir:

  • 0 < u <25 'lightblue' ile,

  • 25 ≤ u <50, 'turuncu' ile,

  • 50 ≤ u <75 'açık yeşil' ile,

  • 75 ≤ u <100 'pembe' ile eşlenir

Ayrıca alanın dışındaki girdi değerlerinin sıkıştırılmadığını unutmayın, bu nedenle örneğimizde quantizeScale (-10) 'lightblue' ve quantizeScale (110) 'pink' verir.

scaleQuantile

var myData = [0, 5, 7, 10, 20, 30, 35, 40, 60, 62, 65, 70, 80, 90, 100];

var quantileScale = d3.scaleQuantile()
  .domain(myData)
  .range(['lightblue', 'orange', 'lightgreen']);

quantileScale(0);   // returns 'lightblue'
quantileScale(20);  // returns 'lightblue'
quantileScale(30);  // returns 'orange'
quantileScale(65);  // returns 'lightgreen'

Sıralanmış etki alanı dizisi, aralık değerlerinin sayısı olduğu n eşit boyutta gruba bölünür. Bu nedenle, yukarıdaki örnekte, domain dizisi 3 gruba ayrılmıştır:

  • ilk 5 değer 'lightblue' ile eşleştirilir

  • 'orange' için sonraki 5 değer ve

  • 'lightgreen' olarak son 5 değer.

Etki alanının bölme noktalarına .quantiles() kullanılarak erişilebilir:

quantileScale.quantiles();  // returns [26.66..., 63]