Extension:Graph/Interactive Graph Tutorial/tr

Bu eğitimde, ülke başına geçmiş doğurganlık oranlarını, yılı seçmek için bir kaydırıcıyı ve dünya genelindeki oran dağılımını gösteren bir haritayı gösteren etkileşimli bir grafik oluşturacağız. Yalnızca bu grafiğin kaynak kodunu araştırmak istiyorsanız, ayrı bir viki sayfası olarak mevcuttur. Deneyler için Etkileşimli Grafik Deneme Tahtası'nı kullanın. Eksiksiz Vega belgeleri de ilginizi çekebilir.

Çizim Şekilleri
Birkaç öğe çizerek başlıyoruz (markaları). Grafik henüz etkileşimli olmasa da, grafik kodu  etiketiyle çevrilidir. Etkileşimli Grafik Deneme Tahtası'nı açın ve denemek için aşağıdaki kodu & lt;graph> etiketi olmadan kopyalayın.

İpucu: Grafik özelliklerini deneme amacıyla Vega Editor'e kopyalamak için "kaynağı düzenle" seçeneğini kullanın.

IsDragging sinyali
Tutamaç nesnemizi sürüklenebilir yapmak için, önce tıklanıp tıklanmadığını bulmamız gerekir. Bunun için, bir nesneye tıklandığında (isDragging) gerçek olan bir sinyali ve sonucu göstermek (hata ayıklamak) için bir metin işareti ekleyelim:

Tutamak Pozisyon sinyali
Artık nesnenin ne zaman sürüklendiğini bildiğimize göre, değerini yalnızca isDragging sinyali doğru olduğunda değiştiren bir  sinyali ekliyoruz. Yeni sinyali ayrıca "update" bölümü üzerinden tutamacın "x" koordinatına ekleriz:

Ölçekleme Kolu Konum sinyali
İşleyicinin piksel konumuna sahip olmak çok iyi değildir. Grafiğimiz için anlamlı bir konuma sahip olmayı tercih ederiz, ör. bir yıl. Vega scales provide a useful mechanism for converting between our data (e.g. years) and the screen coordinates, and back (invert). In this step, we add "yearsScale" linear scale for values 1960..2013, mapping it to the whole width of the graph (excluding padding). We also add a new scaledHandlePosition signal that translates from the mouse X position to the meaningful value in years.

Yıl değeri temizleme
Fark etmiş olabileceğiniz gibi, tutamaç grafiğimizin uzunluğunun ötesine taşınarak yanlış sonuçlar üretebilir. Ayrıca ölçeklenmiş değer, yıl değerinden beklediğimiz bir tam sayı değildir. Bunu düzeltmek için, onu bir tam sayıya dönüştürmek ve gerekli aralıkla sınırlamak için "currentYear" adında bir işlem sonrası sinyali daha ekleyebiliriz. Ayrıca onu makul bir değere başlatırız ve hem "yearLabel" olur hem de gidonun konumunu bu değere geri bağlarız. Tutamacın konumunun ekran koordinatlarında olması gerektiğine dikkat edin, bu nedenle değeri geri dönüştürmek için "yearScale" kullanmalıyız: Also, the scaled value is not an integer that we expect of the year value. To fix this, we can introduce one more post-processing signal called "currentYear" to convert it to an integer and limit it to the needed range. We also initialize it to a reasonable value, and we tie both the "yearLabel" and the position of the handle bar back to this value. Note that the handle's position needs to be in screen coordinates, so we have to use the "yearsScale" to convert the value back:

Son temizlik
Artık tüm hata ayıklama işaretlerini kaldırabiliriz. Ayrıca ayrı handlePosition ve scaledHandlePosition sinyallerine de ihtiyacımız yok çünkü ölçekleme aynı adımda gerçekleşebilir: We also don't need separate handlePosition and scaledHandlePosition signals because scaling can happen in the same step:

Sonraki Adım
Lütfen 2. bölüm ile devam edin