Arc (yay) Oluşturucu

Açı ve yarıçapı değerlerinden path verisi üretir. Bir yay oluşturucu kullanılarak yaratılır:

var arcGenerator = d3.arc();

path verilerini üretmek için startAngle, endAngle, innerRadius ve outerRadius özelliklerini içeren bir nesneden geçirilebilir:

var pathData = arcGenerator({
  startAngle: 0,
  endAngle: 0.25 * Math.PI,
  innerRadius: 50,
  outerRadius: 100
});

// pathData is "M6.123233995736766e-15,-100A100,100,0,0,1,70.71067811865476,-70.710678
// 11865474L35.35533905932738,-35.35533905932737A50,50,0,0,0,3.061616997868383e-15,-50Z"

arc

Yapılandırma

innerRadius, outerRadius, startAngle, endAngle öğelerini her seferinde geçmek zorunda kalmayacak şekilde yapılandırabiliriz:

arcGenerator
  .innerRadius(20)
  .outerRadius(100);

pathData = arcGenerator({
  startAngle: 0,
  endAngle: 0.25 * Math.PI
});

// pathData is "M6.123233995736766e-15,-100A100,100,0,0,1,70.71067811865476,-70.71067811
// 865474L14.142135623730951,-14.14213562373095A20,20,0,0,0,1.2246467991473533e-15,-20Z"

Köşe yarıçapını (cornerRadius) ve yay bölümleri arasındaki dolguyu da (padAngle ve padRadius) yapılandırabiliriz:

arcGenerator
  .padAngle(.02)
  .padRadius(100)
  .cornerRadius(4);

Yay dolgusu iki parametreyi alır padAngle ve padRadius, birlikte çoğaldıklarında bitişik bölümler arasındaki mesafeyi tanımlar. Bu nedenle yukarıdaki örnekte, doldurma mesafesi 0,02 * 100 = 2'dir. Dolgu işleminin (mümkün olduğunda) paralel bölüm sınırlarını koruyacak şekilde hesaplandığına dikkat edin.

Bazı yardımcı fonksiyonlar startAngle, endAngle, innerRadius, outerRadius

arcGenerator
  .startAngle(function(d) {
    return d.startAngleOfMyArc;
  })
  .endAngle(function(d) {
    return d.endAngleOfMyArc;
  });

arcGenerator({
  startAngleOfMyArc: 0,
  endAngleOfMyArc: 0.25 * Math.PI
});

Centroid

Etiketlerin konumlandırılması gibi ihtiyaçlar için bir yayın merkezini hesaplamak bazen yararlı olabilir ve D3'ün bunu yapmak için bir işlevi vardır .centroid():

arcGenerator.centroid({
  startAngle: 0,
  endAngle: 0.25 * Math.PI
});
// returns [22.96100594190539, -55.43277195067721]

Etiket konumlarını hesaplamak için .centroid() kullanıldığı bir örnek: