D3: Grafici ad albero - Etichette migliorate

    let svg = d3.select("body").append("svg")
            .attr("width",670).attr("height",300)

let margin = { top: 5, right: 135, bottom: 5, left: 50 }
let innerWidth = 670 - margin.left - margin.right
let innerHeight = 300 - margin.top - margin.bottom

let graph = svg.append('g')
               .attr('transform', `translate(${margin.left},${margin.top})`)

d3.json("menu.json").then(data => {
    
    let root = d3.hierarchy(data)
    let treeLayout = d3.tree().size([innerHeight, innerWidth])
    treeLayout(root)
    
    let links = root.links()
    let linkGenerator = d3.linkHorizontal()
                          .x(d => d.y)
                          .y(d => d.x)

    graph.selectAll('path')
         .data(links).join('path')
         .attr('d', linkGenerator)
         .attr("fill", "none")
         .attr("stroke", "Chocolate")
})

Le informazioni sui collegamenti, coordinate x e y dell’inzio (source) e della fine (target), si possono ottenere dall’istanza di d3.hierarchy (root.links()).

I collegamenti si possono far disegnare attraverso uno dei generatori di link disponibili (d3.linkHorizontal()) che richiedono l’indicazione sull’uso delle coordinate passate. Nel caso specifico, viene invertito l’uso delle coordinate x e y per visualizzare l’albero in orizzontale, da sinistra verso destra anziché dall’alto verso il basso.

Strutturazione dei file: