D3: Grafici ad albero - Lettura dati

    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)

})

Letto il file JSON con il metodo d3.json() e attesa la fine del caricamento con then(), i dati vengono ristrutturati da d3.hierarchy() per rendere più semplice la generazione di grafici di dati gerarchici.

Le informazioni geometriche specifiche per il tipo di visualizzazione scelta si possono modificare con uno dei metodi disponibili (d3.tree()) per calcolare le coordinate in base una dimensione di riferimento. In questo caso le dimensioni vengono invertite ([innerHeight, innerWidth]) per poter visualizzare un grafico ad albero orizzontale anziché verticale.

L’assenza di immagini nell’area di visualizzazione è normale, data l’attuale mancanza di istruzioni che creano elementi SVG.

Strutturazione dei file: