D3.js kullanarak WordPress sitenize grafikler nasıl eklenir

Hem uygulama hem de kariyer yolu olarak daha yaygın hale geldiği için "veri görselleştirme" terimine aşina olabilirsiniz. Gelişmekte olan bu alanın yolunda gitmesinin bir nedeni var - kullanıcılarımız hakkında sürekli olarak daha fazla şey öğrenmemiz ve onlara iddialarımızı destekleyecek verileri göstermemiz önemlidir.

Veriler temiz ve profesyonel bir şekilde sunulduğunda, anlaşılmasını ve yorumlanmasını kolaylaştırır. Çoğu durumda, kullanıcılarınız görsel kişilerdir, bu nedenle verileri göstermenin grafiklerle göstermekten daha iyi bir yolu var mı? Veriye Dayalı Belgeler olarak da adlandırılan D3.js, WordPress sitenize grafikler eklemenin harika bir yoludur.

Neden D3?

Bu kitaplık, tasarımcıların verileri web üzerinde sergilemelerine yardımcı olur. Olasılıklar sonsuzdur, bu da bunu çok popüler bir kütüphane haline getirir. Basitten karmaşığa, aradaki herhangi bir şeye kadar, D3 hemen hemen her tür grafiği oluşturmak için özelleştirilebilir. Standart web teknolojileriyle güzel bir şekilde çalışır, DOM'yi manipüle edebilir, süper esnektir ve çizelgeler tam olarak beğeninize göre özelleştirilebilir.

Şimdiye kadar, büyük olasılıkla, genellikle SVG'ler olarak adlandırılan Ölçeklenebilir Vektör Grafikleri ile karşılaşmışsınızdır. Bu, D3 kitaplığının oluşturduğu biçim türüdür. SVG'ler harikadır çünkü boyutları küçüktür, ölçeklenebilirdir ve çözünürlükten bağımsızdır.

Açık olmak gerekirse, bu çözüm kutudan çıktığı gibi önceden oluşturulmuş herhangi bir çizelgeyle birlikte gelmez – kendi tablonuzu bulmanız gerekecek! D3 galerisine bir göz atın ve size ilham verecek birçok harika örnek görebilirsiniz.

Bir Açık Kaynak çözümü olarak, lisanslama ve maliyet konusunda endişelenmenize gerek yok. Açık Kaynak olduğu için geliştirme devam etmektedir. En son sürümle güncel kalmak için Github'da D3'ü çatallayabilirsiniz.

Basit bir D3 grafiği oluşturma

Artık D3'ün ne kadar harika olduğunu bildiğimize göre, hadi bir şeyler inşa edelim. D3'ün temel kavramlarını kapsayacak basit bir halka grafiği yapacağız.

Birinci adım: komut dosyalarını sitenize ekleyin

İlk olarak, WordPress sitenize D3 betiğini eklemeniz gerekecek. d3 web sitesinde indirilebilir veya doğrudan en son sürüme bağlayabilirsiniz. Bu eğitim için küçültülmüş sürümü kullandığımı fark edeceksiniz. D3, doğal olarak oldukça küçüktür, ancak küçültülmüş, yalnızca 148 KB'de hala biraz daha küçüktür.

Ardından, özel grafik komut dosyasının gittiği yeni bir JavaScript dosyası oluşturacaksınız. Dosyaya tanınabilir bir ad verin, böylece bulunması kolay olacaktır.

D3 komut dosyasının grafiğe özel JavaScript'ten önce çağrılması çok önemlidir. İşler doğru sırayla çağrılmazsa, çizelgeler oluşturulmaz. (Bunu kişisel deneyimlerimden biliyorum ve hemen anlamazsanız, bozulmamış şeyleri onarmak için çok zaman harcarsınız.)

Bu scriptler sitenize kapanış body etiketinden sonra eklenmelidir. Sayfayı incelerken, şöyle göründüğünden emin olun:

<script type="text/javascript" src="js/d3/d3.min.js"></script>
<script type="text/javascript" src="js/charts/charts.js"></script>

Dosya yapınıza bağlı olarak dosya yolunuzun bundan farklı olabileceğini unutmayın.

İkinci adım: grafiği oluşturmak için komut dosyaları ekleyin

d3.js dosyasına hiç dokunmayacaksınız, yalnızca kendi özel grafik dosyanızda çalışacaksınız. Bu durumda, charts.js olarak adlandırılır.

Her şeyi parça parça ayıralım. İlk olarak, değişkeninizi oluşturun ve işlevinizde neye ihtiyacınız olacağını belirleyin. Bu değişkene donut adını vereceğim.

var donut = (function(one) {
})();

Kıvrımlı parantezlerin içine beden bilginizi ekleyeceksiniz.

var width = 400,

height = 400,

radius = 200

Ardından, renklerinizi tanımlayın. Gri ve mavi bir tabloya ne dersiniz? Burada listelenen ilk renk, varsayılan renk olacak açık gridir. İkincisi ise verileri temsil edecek olan mavi renktir.

colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);

Bunu test etmek için bazı verilere ihtiyacınız olacak, o yüzden şimdi onu ekleyelim. Bu öğretici için veriler sabit kodlanmıştır, ancak elektronik tablo verilerini ve dinamik verileri D3 ile de kullanabilirsiniz.

var piedata = [{

value: 50

}, {

value: 30

}, ]

Artık grafiğin nasıl oluşturulacağını tanımlamaya yardımcı olacak daha fazla ayrıntı ekleyebilirsiniz.

Yay, iç yarıçapı tanımlar. Grafiğin dış yarıçapını hayal edin - oldukça kalın olmasını isteyeceksiniz, bu nedenle 100 çıkarmak yeterli olacaktır.

var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)

Bu, SVG kapsayıcısını oluşturur ve #donut , grafiği gerçekten oluşturmak için sayfanızda hedefleyeceğiniz şeydir. Bu, yukarıdaki adımdan renklerinizi görmeye başlayacağınız yerdir.

var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

Bitmiş kod

Sahip olduklarınızı örnekle karşılaştırmak istemeniz durumunda, işte tam kod parçacığı.

/* start donut charts */
var donut = (function(one) {
var width = 400,

height = 400,

radius = 200
colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);
var piedata = [{

label: "One",

value: 50

}, {

label: "Two",

value: 30

}, ]
var pie = d3.layout.pie()

.value(function(d) {

return d.value;

})
var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)
var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

})();

grafiği görmek

Yeni bir sayfa veya gönderi oluşturmanız gerekecek, böylece onu gerçekten görmek için halka grafiği "arayabilirsiniz". Metin düzenleme modunda olduğunuzdan emin olun.

 <div>

      <svg id="donut" viewBox="0 0 400 400" perserveAspectRatio="xMinYMid"></svg>

</div>

Görünüm kutusu ve en boy oranı-boyut tablosu

SVG etiketinde, viewBox ve preserveAspectRatio olan fazladan bir şey var. Bu, D3 tarafından oluşturulmamıştır ve tamamen isteğe bağlıdır. Tercih ettiğiniz başka bir boyutlandırma yönteminiz olabilir, ancak bu iyi sonuç verme eğilimindedir ve çizelgelerin yanıt verme hızına yardımcı olur.

Özellikle bu durumda, mükemmel bir yuvarlak şekli korumak istediğimizden, bir en-boy oranı ayarlamak SVG ölçeklerinin sığmasını sağlayacaktır. viewBox devreye girdiği yer burasıdır. viewBox avantajı, SVG içinde kullanılan tüm ölçümlerin ve koordinatların mevcut alana sığacak şekilde nasıl ölçeklenmesi gerektiğini tanımlamasıdır. Bir ölçüm olarak 400'ü de kullanıyorsanız, dairesel şeklin nasıl korunacağına dair hızlı bir açıklama burada.

Aynı olan iki 400 değerimiz var; Bunun nedeni görüntünün düzgün ölçeklenmesidir. viewBox="0 0 400 400" ile grafik için bir koordinat sistemi oluşturuyoruz. 400 birim genişliğinde ve 400 birim yüksekliğindedir. SVG grafiğinin genişliği ve yüksekliği, görünür alanı oluşturur ve bir görünüm kutusu ayarlamak, grafiklerinizin belirli bir kaba sığacak şekilde viewBox belirtmenize olanak tanır (büyük olasılıkla, web sayfasının kullanıcının görüntüleyebileceği kısmı olan varsayılan olarak görünüm alanıdır). şu anda bakınız).

Biraz daha fazlası var çünkü viewBox tanımlı olsa bile yine de mükemmel şekilde ölçeklenmeyecek. Bozulmayacak, ki bu iyi bir şey ama denklemde daha fazlası var. Kanat adamla tanışın, preserveAspectRatio . Görüntünün en-boy oranını tanımlayan bir viewBox olmadığı sürece hiçbir etkisi yoktur. Ölçek, en boy oranını korumak için ayarlanacaktır, böylece mükemmel dairesel grafiğinizi koruyabilirsiniz. preserveAspectRatio dahil ederken, viewBox grafiğin bulunduğu görünüm alanının veya kabın en boy oranıyla eşleşmediği durumları planlıyorsunuz. Çoğu durumda, varsayılan olarak görüntü hem yüksekliğe hem de genişliğe uyana kadar ölçeklenir ancak kendini herhangi bir ekstra uzayda merkezler. Tarayıcıya grafiği görünüm alanı içinde her iki yönde de ortalamasını söyleyen preserveAspectRatio="xMidYMid" .

En önemli paket, grafiğin kesilmeyeceğini ve ölçeklenebilir olduğunu bilmektir. Bunu gerçekten anlamanın anahtarı, değerlerle deney yapmaktır. Bunu yapmanın iyi bir yolu, değerler değiştiğinde ne olduğunu ve bunun görüntü alanıyla nasıl ilişkili olduğunu görmektir.

Tarayıcı desteği ve d3

Muhtemelen modern bir tarayıcı kullanıyorsunuzdur, ancak daha eski tarayıcıları desteklemeniz gerekip gerekmediğini belirtmekte fayda var. Genel olarak, tarayıcı desteği harikadır ve muhtemelen herhangi bir sorunla karşılaşmazsınız, ancak D3.js, IE8 gibi eski tarayıcılarla iyi çalışmaz.

Basit bir grafik oluşturmak, D3.js ile çalışır durumda olmanın harika bir yoludur. Temel bilgileri bilmek ve D3 başlangıç ​​çizelgelerine aşina olmak, verilerinizi tasarlarken ve daha fazla grafik türüne geçerken size çok yardımcı olacaktır. Basitten karmaşığa, tasarım seçenekleri sonsuzdur.

Grafiğin nasıl çıktı? Yorumlarda bize bildirin!

Sıradaki ne?

Geliştiriciler için en çok önerilen eklentilerimizin listesi için bu e-kitabı indirin! Tüm bu eklentilerin kullanımının basit olduğunu, sitenizde çok fazla performans gerektirmediğini ve tamamen güvenilir olduğunu gördük.

Yeni favori eklentinizi yüklemeye hazır mısınız? Aşağıya tıklayın!