Treemap Layout

Treemaps, her bir öğenin birleşik değere sahip olduğu hiyerarşileri görsel olarak göstermek için Ben Shneiderman tarafından icat edildi.

Örneğin, ülke nüfusu verisinin birinci seviyenin bölgeyi, sonraki seviyenin her ülkeyi temsil ettiği bir hiyerarşi olduğunu düşünebiliriz. Ağaç haritası, her ülkeyi bir dikdörtgen olarak temsil edecek (popülasyonla orantılı olarak boyutlandırılacak) ve her bölgeyi birlikte gruplayacaktır:

Oluşturmak için:

var treemapLayout = d3.treemap();

Eğer yapılandırmak istersek aşağıdaki şekilde yapabiliriz:

treemapLayout
  .size([400, 200])
  .paddingOuter(10);

Bu düzeni hiyerarşimize uygulamadan önce, hiyerarşide .sum() fonksiyonunu çalıştırmalıyız. Bu, ağacı dolaşır ve her düğümde .value değerini alt toplamına ayarlar:

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

treemapLayout(root);

Ağaç haritasındaki her dikdörtgenin boyutlarını belirten her bir düğüme, x0, x1, y0 ve y1 özellikleri eklenir. Bunları kullanarak dikdörtgenlere genişlik, yükseklik gibi özelliklerini ekleyebiliriz.

d3.select('svg g')
  .selectAll('rect')
  .data(root.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; })

Her dikdörtgenin içine yazı eklemek istersek, g öğelerini diziye ekleyebilir ve her g'ye dikdörtgen ve metin öğeleri ekleyebiliriz:

var nodes = d3.select('svg g')
  .selectAll('g')
  .data(rootNode.descendants())
  .enter()
  .append('g')
  .attr('transform', function(d) {return 'translate(' + [d.x0, d.y0] + ')'})

nodes
  .append('rect')
  .attr('width', function(d) { return d.x1 - d.x0; })
  .attr('height', function(d) { return d.y1 - d.y0; })

nodes
  .append('text')
  .attr('dx', 4)
  .attr('dy', 14)
  .text(function(d) {
    return d.data.name;
  })

Düzen çeşitli şekillerde yapılandırılabilir:

• Bir düğümün çocukları etrafındaki dolgu, .paddingOuter kullanılarak ayarlanabilir.

• kardeş düğümleri arasındaki dolgu, .paddingInner kullanılarak ayarlanabilir.

• Dış ve iç dolgu aynı anda .padding kullanılarak ayarlanabilir

• Dış dolgu da .paddingTop, .paddingBottom, .paddingLeft ve .paddingRight kullanılarak ayrıca ayarlanabilir.

Örnekte paddingTop 20, paddingInner ise 2'dir.

Treemaps farklı döşeme stratejileri kullanabilir ve D3'te yerleşik olarak birkaç tane (treemapBinary, treemapDice, treemapSlice, treemapSliceDice, treemapSquarify) yapılandırma işlevini kullanabilirsiniz .tile fonksiyonu seçmek için kullanılır:

treemapLayout.tile(d3.treemapDice)