Tree Layout

Ağaç düzeni, hiyerarşinin düğümlerini ağaç benzeri bir düzende düzenler.

tree layout

var treeLayout = d3.tree();
treeLayout.size([400, 200]);
treeLayout(root);

Bu, her bir kök düğümüne x ve y değerleri yazar.

• Tüm düğümlerin bir dizisini almak için root.descendants() kullanabilirsiniz.

• Çevreleri konumlandırmak için x ve y değerlerini kullanabilirsiniz.

• Tüm bağlantıların bir dizisini almak için root.links() işlevini kullanabilirsiniz.

• Aradaki bağlantıyı konumlandırmak için bağlantının kaynağının ve hedefinin x ve y değerlerini kullanabilirsiniz.

root.links(), her bir dizi öğesi, bağlantının kaynağını (source) ve (target) hedef düğümlerini temsil eden iki özellik içeren bir nesnedir.

// Nodes
d3.select('svg g.nodes')
  .selectAll('circle.node')
  .data(root.descendants())
  .enter()
  .append('circle')
  .classed('node', true)
  .attr('cx', d => d.x)
  .attr('cy', d => d.y)
  .attr('r', 4);

// Links
d3.select('svg g.links')
  .selectAll('line.link')
  .data(root.links())
  .enter()
  .append('line')
  .classed('link', true)
  .attr('x1', d => d.source.x)
  .attr('y1', d => d.source.y)
  .attr('x2', d => d.target.x)
  .attr('y2', d => d.target.y);