Düzenler (Layouts)

Daha gelişmiş grafikler oluşturmaya yardımcı olmak için D3 bir çok layout sağlar. Bazılarının görüntüleri aşağıda:

network graphs

treemap

packed circles

Bir layout temelde verilerinizi alıp bunlara x ve y kordinatları ekleyen fonksiyonlardır.

Örneğin, ağaç düzeni hiyerarşik bir veri yapısı alır ve düğümlerin ağaç benzeri bir şekil oluşturacak şekilde her düğüme x ve y değerleri ekler:

Hiyerarşik Düzenler (Layouts)

D3, hiyerarşileri (veya ağaçları) görselleştirmeye yardımcı olacak bir dizi hiyerarşik düzene sahiptir;

{
  "name": "A1",
  "children": [
    {
      "name": "B1",
      "children": [
        {
          "name": "C1",
          "value": 100
        },
        {
          "name": "C2",
          "value": 300
        },
        {
          "name": "C3",
          "value": 200
        }
      ]
    },
    {
      "name": "B2",
      "value": 200
    }
  ]
}

Bu bölümde tree, cluster, treemap, pack ve partition düzenlerine bakacağız. treemap, pack ve partition, düğümlerin ilişkili bir sayısal değere sahip olduğu (örneğin gelir, nüfus vb.) hiyerarşileri ortaya koymak üzere tasarlanmışlardır.

var data = {
  "name": "A1",
  "children": [
    {
      "name": "B1",
      "children": [
        {
          "name": "C1",
          "value": 100
        },
        {
          "name": "C2",
          "value": 300
        },
        {
          "name": "C3",
          "value": 200
        }
      ]
    },
    {
      "name": "B2",
      "value": 200
    }
  ]
}

var root = d3.hierarchy(data)

Genellikle, hiyerarşi nesnesinin kendisinde işlem yapmanız gerekmez, ancak üzerinde tanımlanmış bazı yararlı işlevler vardır:

root.descendants();
root.links()

root.descendants(), kökünün soyundan gelen düz bir diziyi ve root.links(), tüm alt-alt bağlantılarını içeren düz bir nesne dizisi döndürür.