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")
  
    graph.selectAll('text')
         .data(root.descendants()).join('text')
         .text(d => d.data.name)
         .attr('x', d => d.y)
         .attr('y', d => d.x)
})

I nodi, in questo caso rappresentati dalle sole etichette, possono essere creati usando tutti i “discendenti” a partire dalla radice. Il metodo root.descendants() restituisce un array contenente tutti i nodi in sequenza con le informazioni originarie memorizzate nella proprietà ‘data’ aggiunta da d3.hierarchy().

Anche in questo caso va mantenuta l’inversione delle coordinate x e y per visualizzare l’albero in orizzontale anziché in verticale.

Alla riga 14 del codice sostituire il nome del metodo tree() con quello del metodo cluster() per notare le differenze nella visualizzazione della struttura ad albero.

Strutturazione dei file: