D3.js - Şekiller API'si

Bu bölümde D3.js'deki farklı şekil oluşturucular anlatılmaktadır.

API'yi Yapılandırma

Shapes API'sini aşağıdaki komut dosyasını kullanarak yapılandırabilirsiniz.

<script src = "https://d3js.org/d3-path.v1.min.js"></script>
<script src = "https://d3js.org/d3-shape.v1.min.js"></script>
<script>

</script>

Şekiller Üreteçleri

D3.js farklı şekilleri destekler. Öne çıkan şekillerden detaylı bir şekilde geçelim.

Arcs API

Ark üreteci bir daire veya halka şekli oluşturur. Bu API yöntemlerini önceki pasta grafikler bölümünde kullandık. Çeşitli Arcs API yöntemlerini ayrıntılı olarak anlayalım.

  • d3.arc() - Bu yöntem, yeni bir ark üreteci oluşturmak için kullanılır.

  • arc(args)- Belirtilen argümanlarla bir yay oluşturmak için kullanılır. Nesne yarıçapları ve açıları ile varsayılan ayarlar aşağıda tanımlanmıştır.

<script>
   var arc = d3.arc();
   arc({
      innerRadius: 0,
      outerRadius: 100,
      startAngle: 0,
      endAngle: Math.PI / 2
   });
</script>
  • arc.centroid(args) - Bu yöntem, yayın merkez çizgisinin orta noktasını [x, y] belirtilen bağımsız değişkenlerle hesaplamak için kullanılır.

  • arc.innerRadius([radius])- Bu yöntem, verilen yarıçaptan iç yarıçapı ayarlamak ve bir ark üreteci döndürmek için kullanılır. Aşağıda tanımlanmıştır -

function innerRadius(d) {
   return d.innerRadius;
}
  • arc.outerRadius([radius])- Bu yöntem, verilen yarıçaptan dış yarıçapı ayarlamak ve bir ark üreteci döndürmek için kullanılır. Aşağıdaki gibi tanımlanır.

function outerRadius(d) {
   return d.outerRadius;
}
  • arc.cornerRadius([radius])- Bu yöntem, verilen yarıçaptan köşe yarıçapını ayarlamak ve bir ark üreteci döndürmek için kullanılır. Aşağıdaki gibi tanımlanır.

function cornerRadius() {
   return 0;
}

Köşe yarıçapı sıfırdan büyükse, yayın köşeleri, verilen yarıçapın daireleri kullanılarak yuvarlanır. Köşe yarıçapı (dış Yarıçap - iç Yarıçap) / 2'den büyük olamaz.

  • arc.startAngle([angle])- Bu yöntem, başlangıç ​​açısını verilen açıdan işleve ayarlamak için kullanılır. Aşağıdaki gibi tanımlanır -

function startAngle(d) {
   return d.startAngle;
}
  • arc.endAngle([angle])- Bu yöntem, bitiş açısını belirli bir açıdan fonksiyona ayarlamak için kullanılır. Aşağıdaki gibi tanımlanır.

function endAngle(d) {
   return d.endAngle;
}
  • arc.padAngle([angle])- Bu yöntem, ped açısını verilen açıdan fonksiyona ayarlamak için kullanılır. Aşağıdaki gibi tanımlanır.

function padAngle() {
   return d && d.padAngle;
}
  • (x) arc.padRadius([radius])- Bu yöntem, ped yarıçapını verilen yarıçaptan belirtilen işleve ayarlamak için kullanılır. Ped yarıçapı, padRadius * padAngle olarak tanımlanan, bitişik yayları ayıran sabit doğrusal mesafeyi belirler.

  • (xi) arc.context([context]) - Bu yöntem, içeriği ayarlamak ve bir ark oluşturucuyu döndürmek için kullanılır.

Pies API

Bu API, bir Pasta oluşturucu oluşturmak için kullanılır. Bu API yöntemlerini önceki bölümde uyguladık. Tüm bu yöntemleri ayrıntılı olarak tartışacağız.

  • d3.pie() - Varsayılan ayarlarla yeni bir pasta oluşturucu oluşturur.

  • pie(data[, arguments])- Bu yöntem, verilen dizi değerleri için bir pasta oluşturmak için kullanılır. Bir dizi nesne döndürür. Nesneler, datumun yay açılarıdır. Her nesne aşağıdaki özelliklere sahiptir -

    • data- giriş verisi; giriş veri dizisindeki ilgili eleman.

    • value - yayın sayısal değeri.

    • index - yayın indeksi.

    • startAngle - yayın başlangıç ​​açısı.

    • endAngle - yayın bitiş açısı.

    • padAngle - arkın ped açısı.

  • pie.value([value])- Bu yöntem, değeri belirtilen işleve ayarlamak ve bir pasta oluşturmak için kullanılır. Aşağıdaki gibi tanımlanır -

function value(d) {
   return d;
}
  • pie.sort([compare])- Bu yöntem, verileri belirtilen işleve göre sıralamak ve pasta oluşturmak için kullanılır. Karşılaştırıcı işlevi aşağıdaki gibi tanımlanır.

pie.sort(function(a, b) 
   { return a.name.localeCompare(b.name); }
);

Burada karşılaştırma işlevi, her biri girdi veri dizisinden gelen 'a' ve 'b' olmak üzere iki bağımsız değişken alır. 'A' yayı 'b' yayından önce olması gerekiyorsa, karşılaştırıcının sıfırdan küçük bir sayı döndürmesi gerekir. 'A' yayı 'b' yayından sonra olması gerekiyorsa, karşılaştırıcı sıfırdan büyük bir sayı döndürmelidir.

  • pie.sortValues([compare])- Bu yöntem, verilen işlevin değerini karşılaştırmak ve bir pasta oluşturmak için kullanılır. Fonksiyon aşağıdaki gibi tanımlanır.

function compare(a, b) {
   return b - a;
}
  • pie.startAngle([angle])- Bu yöntem, pastanın başlangıç ​​açısını belirtilen işleve ayarlamak için kullanılır. Açı belirtilmezse, geçerli başlangıç ​​açısını döndürür. Aşağıdaki gibi tanımlanır.

function startAngle() {
   return 0;
}
  • pie.endAngle([angle])- Bu yöntem, pastanın bitiş açısını belirtilen işleve ayarlamak için kullanılır. Açı belirtilmezse, geçerli bitiş açısını döndürür. Aşağıdaki gibi tanımlanır.

function endAngle() {
   return 2 * Math.PI;
}
  • pie.padAngle([angle])- Bu yöntem, ped açısını belirtilen işleve ayarlamak ve pastayı oluşturmak için kullanılır. Fonksiyon aşağıdaki gibi tanımlanır.

function padAngle() {
   return 0;
}

Hatlar API'si

Hatlar API'si bir hat oluşturmak için kullanılır. Bu API yöntemlerini,Graphsbölüm. Her yöntemi ayrıntılı olarak inceleyelim.

  • d3.line() - Bu yöntem, yeni bir hat üreteci oluşturmak için kullanılır.

  • line(data) - Bu yöntem, verilen veri dizisi için bir satır oluşturmak için kullanılır.

  • line.x([x])- Bu yöntem, x erişimcisini belirtilen işleve ayarlamak ve bir satır oluşturmak için kullanılır. Fonksiyon aşağıda tanımlanmıştır,

function x(d) {
   return d[0];
}
  • line.y([y])- Bu yöntem, 'y' erişimcisini belirtilen işleve ayarlamak ve bir satır oluşturmak için kullanılır. Fonksiyon aşağıdaki gibi tanımlanır.

function y(d) {
   return d[1];
}
  • line.defined([defined])- Bu yöntem, tanımlanan erişimciyi belirtilen işleve ayarlamak için kullanılır. Aşağıdaki gibi tanımlanır.

function defined() {
  return true;
}
  • line.curve([curve]) - Eğriyi ayarlamak ve çizgiyi oluşturmak için kullanılır.

  • line.context([context])- Bu yöntem, bağlamı ayarlamak ve bir satır oluşturmak için kullanılır. Bağlam belirtilmezse, null döndürür.

  • d3.lineRadial()- Bu yöntem, yeni radyal çizgi oluşturmak için kullanılır; Kartezyen hat üretecine eşdeğerdir.

  • lineRadial.radius([radius])- Bu yöntem bir radyal çizgi çizmek için kullanılır ve erişimci yarıçapı döndürür. Başlangıç ​​noktasından (0,0) uzaklık alır.

Sonraki bölümde, D3.js'deki Renkler API'sini öğreneceğiz.