D3.js
  • D3.js Nedir, Ne Değildir?
  • JS Grafik Kütüphaneleri
  • Modüler D3.js
    • D3.js Eklenti Oluşturma
  • Başlangıç
  • Seçiciler
  • Element Biçimlendirme
  • Olaylar (Events)
  • Geçişler ve Animasyonlar
    • Kontrol Fonksiyonları
    • Bir Geçişin Yaşam Döngüsü
  • Ölçekler (Scales)
    • Sürekli Girdili ve Sürekli Çıktılı
    • Sürekli Girdili ve Kesikli Çıktılı
    • Kesikli Girdili ve Gesikli Çıktılı
  • Eksen (Axes)
  • Şekiller (Shapes)
    • Çizgi (line) Oluşturucu
    • Area (alan) Oluşturucu
    • Stack (yığın) Oluşturucu
    • Arc (yay) Oluşturucu
    • Pie (pasta) Oluşturucu
    • Symbols (semboller)
  • Düzenler (Layouts)
    • Tree Layout
    • Cluster Layout
    • Treemap Layout
    • Pack Layout
    • Partition Layout
    • Chord Layout
    • Force Layout
  • Kaynaklar
Powered by GitBook
On this page

Was this helpful?

  1. Düzenler (Layouts)

Chord Layout

Akor şemaları, her akışın sayısal bir değere sahip olduğu bir grup düğüm arasındaki bağlantıları (veya akışları) görselleştirir. Örneğin, ülkeler arasındaki göç akışını gösterebilirler.

Verilerin bir nxn matrisi şeklinde olması gerekir (burada n, öğe sayısıdır):

var data = [
  [10, 20, 30],
  [40, 60, 80],
  [100, 200, 300]
];

var chordGenerator = d3.chord();

.padAngle() (komşu gruplar arasındaki açıyı radyan cinsinden ayarlamak için), .sortGroups() (grupların sırasını belirlemek için), .sortSubgroups() (her grup içinde sıralamak için) ve .sortChords() kullanarak z sırasını belirleyebiliriz.

var chords = chordGenerator(data);

var ribbonGenerator = d3.ribbon().radius(200);

d3.select('g')
  .selectAll('path')
  .data(chords)
  .enter()
  .append('path')
  .attr('d', ribbonGenerator)
PreviousPartition LayoutNextForce Layout

Last updated 5 years ago

Was this helpful?