Pie (pasta) Oluşturucu

Pasta oluşturucu yay üreteci kullanır. Bir veri dizisi verildiğinde, pasta üreteci başlangıç ​​ve bitiş açılarıyla artırılan orijinal verileri içeren bir nesne dizisi çıkarır:

var pieGenerator = d3.pie();
var data = [10, 40, 30, 20, 60, 80];
var arcData = pieGenerator(data);

// arcData is an array of objects: [
//   {
//     data: 10,
//     endAngle: 6.28...,
//     index: 5,
//     padAngle: 0,
//     startAngle: 6.02...,
//     value: 10
//   },
//   ...
// ]

Daha sonra path verisi oluşturmak için bir yay üreteci kullanabiliriz:

var arcGenerator = d3.arc()
  .innerRadius(20)
  .outerRadius(100);

d3.select('g')
  .selectAll('path')
  .data(arcData)
  .enter()
  .append('path')
  .attr('d', arcGenerator);

pieGenerator çıktısının startAngle ve endAngle özelliklerini içerdiğine dikkat edin. Bunlar arcGenerator tarafından istenen özelliklerle aynıdır.

Pie oluşturucu .padAngle(), .startAngle(), .endAngle() ve .sort() gibi çeşitli yapılandırma işlevlerine sahiptir. .padAngle(), komşu parçalar arasında (radyan olarak) açısal bir dolgu sağlar. .startAngle() ve .endAngle(), pasta grafiğin başlangıç ​​ve bitiş açısını yapılandırır. Bu, örneğin, yarı dairesel pasta grafiklerinin oluşturulmasına izin verir:

Varsayılan olarak, parça başlangıç ​​ve bitiş açıları, parçaların azalan düzende olacağı şekilde belirtilir. Ancak .sort kullanarak sıralama düzenini değiştirebiliriz:

var pieGenerator = d3.pie()
  .value(function(d) {return d.quantity;})
  .sort(function(a, b) {
    return a.name.localeCompare(b.name);
  });

var fruits = [
  {name: 'Apples', quantity: 20},
  {name: 'Bananas', quantity: 40},
  {name: 'Cherries', quantity: 50},
  {name: 'Damsons', quantity: 10},
  {name: 'Elderberries', quantity: 30},
];