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)

Kesikli Girdili ve Gesikli Çıktılı

PreviousSürekli Girdili ve Kesikli ÇıktılıNextEksen (Axes)

Last updated 5 years ago

Was this helpful?

scaleOrdinal

scaleOrdinal, ayrık değerleri (bir dizi tarafından belirtilen) ayrık değerlere eşler. Etki alanı dizisi, olası giriş değerlerini ve aralık dizisinin çıkış değerlerini belirtir. Range dizisi, domain dizisinden daha kısaysa tekrarlanır.

var myData = [
  'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
]

var ordinalScale = d3.scaleOrdinal()
  .domain(myData)
  .range(['black', '#ccc', '#ccc']);

ordinalScale('Jan');  // returns 'black';
ordinalScale('Feb');  // returns '#ccc';
ordinalScale('Mar');  // returns '#ccc';
ordinalScale('Apr');  // returns 'black';

scaleBand

Çubuk grafikler oluştururken scaleBand, her bir çubuk arasındaki dolguyu dikkate alarak çubukların geometrisini belirlemeye yardımcı olur. Etki alanı, bir değerler dizisi (her bant için bir değer) ve aralık, bantların minimum ve maksimum uzantıları (ör. Çubuk grafiğin toplam genişliği) olarak belirlenir.

var bandScale = d3.scaleBand()
  .domain(['Mon', 'Tue', 'Wed', 'Thu', 'Fri'])
  .range([0, 200]);

bandScale('Mon'); // returns 0
bandScale('Tue'); // returns 40
bandScale('Fri'); // returns 160

scalePoint

var pointScale = d3.scalePoint()
  .domain(['Mon', 'Tue', 'Wed', 'Thu', 'Fri'])
  .range([0, 500]);

pointScale('Mon');  // returns 0
pointScale('Tue');  // returns 125
pointScale('Fri');  // returns 500

Noktalar arasındaki mesafeye .step() kullanılarak erişilebilir:

pointScale.step();  // returns 125