Partition Layout

Bölüm düzeni, hiyerarşinin her katmanı için bir katmana dikdörtgen bir alan böler. Her katman, katmandaki her düğüm için alt bölümlere ayrılmıştır:

var partitionLayout = d3.partition();

partitionLayout.size([400, 200]);

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

partitionLayout(rootNode);

Her düğüm için x0, x1, y0, y1 değerlerini ekler. Bunları kullanarak dikdörtgenler oluşturalım.

d3.select('svg g')
  .selectAll('rect')
  .data(rootNode.descendants())
  .enter()
  .append('rect')
  .attr('x', function(d) { return d.x0; })
  .attr('y', function(d) { return d.y0; })
  .attr('width', function(d) { return d.x1 - d.x0; })
  .attr('height', function(d) { return d.y1 - d.y0; });

.padding() kullanarak düğümler arasına dolgu eklenebilir:

partitionLayout.padding(2)

Bölüm düzeninin yönünü, katmanların soldan sağa doğru çalışması için değiştirmek isterseniz, rect öğelerini tanımlarken, x0, y0 ile ve x1, y1 ile değiştirebiliriz:

 .attr('x', d => d.y0)
 .attr('y', d =>  d.x0)
 .attr('width', d =>  d.y1 - d.y0)
 .attr('height', d =>  d.x1 - d.x0);