Pack Layout

Paket düzeni, ağaç düzenine benzer ancak dikdörtgen yerine daireler düğümleri temsil etmek için kullanılır. Aşağıdaki örnekte her ülke bir daireyle temsil edilir (popülasyona göre boyutlandırılmıştır) ve ülkeler bölgelere göre gruplandırılmıştır.

var packLayout = d3.pack();

packLayout.size([300, 300]);

rootNode.sum(d => d.value);

packLayout(rootNode);

Paket düzeni her düğüme x, y ve r (yarıçapı için) özelliklerini ekler.

d3.select('svg g')
  .selectAll('circle')
  .data(rootNode.descendants())
  .enter()
  .append('circle')
  .attr('cx', function(d) { return d.x; })
  .attr('cy', function(d) { return d.y; })
  .attr('r', function(d) { return d.r; })

Etiketler her düğüm için g elemanı oluşturularak eklenebilir:

var nodes = d3.select('svg g')
  .selectAll('g')
  .data(rootNode.descendants())
  .enter()
  .append('g')
  .attr('transform', d => 'translate(' + [d.x, d.y] + ')')

nodes
  .append('circle')
  .attr('r', d => d.r)

nodes
  .append('text')
  .attr('dy', 4)
  .text(d => d.children === undefined ? d.data.name : '')

Her dairenin etrafındaki dolgu, .padding() kullanılarak yapılandırılabilir: