.png)
Se hai bisogno di creare un grafico usando JavaScript, D3.js è certamente l'opzione più semplice e ottimale.
Questa guida ti mostrerà come realizzare un grafico usando D3.js, se sei interessato nella spiegazione del programma segui la guida, se invece vai di fretta ti serve una soluzione veloce per produrre un grafico, puoi copiare il codice dalla nostra repository su GitHub.
Cominciamo!
- Creare un Grafico usando JavaScript e D3.js
Supponiamo di avere dei dati da illustrare su un grafo, contenuti in un array del tipo:
var punti = [{
'x': 4,
'y': 10
}, {
'x': 8,
'y': 12
}, {
'x': 30,
'y': 58
}, {
'x': 57,
'y': 35
}, {
'x': 69,
'y': 66
}, {
'x': 100,
'y': 80
}];Possiamo sfruttare le funzioni di D3.js per produrre un grafico da questi punti.
Cominciamo con inserire un elemento <svg> nella nostra pagina index.html attribuendo a questo elemento un id riconoscibile.
<svg id="grafico" width="1000" height="500"></svg>Ora possiamo selezionare usando D3.js questo elemento <svg> , e dichiarare alcune variabili di margine e altezza nel seguente modo:
var vis = d3.select("#grafico"),
WIDTH = 1000,
HEIGHT = 500,
MARGINS = {
top: 20,
right: 20,
bottom: 20,
left: 50
};Adesso possiamo dichiarare le variabili che specificheranno le proporzioni dei nostri assi X e Y del grafico.
// proporzioni asse X
x = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([0,100]);
// proporzioni asse Y
y = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0,100]);Queste variabili x e y prendono come parametro il domain ( Il dominio dei valori che saranno presenti in questo asse nel nostro caso i valori dei punti x non oltrepassano il valore 100, quindi possiamo mettere da 0 - 100 ). il secondo parametro è il range ( lo spazio sul quale si spargeranno i punti specificati nel dominio ).
Ora creiamo gli assi del grafico nel seguente modo:
xAxis = d3.svg.axis()
.scale(x)
.tickSize(1)
.tickSubdivide(true),
yAxis = d3.svg.axis()
.scale(y)
.tickSize(1)
.orient("left")
.tickSubdivide(true);Con queste due variabili specifichiamo le proporzioni dell'asse (scale), le grandezza della linea (tickSize), la posizione dell' asse (orient), e se sono visibili le lineette del grafico.
Adesso assegnamo all'elemento <svg>, gli assi inserendoli nella funzione .call()
vis.append("svg:g").attr("class", "x axis") .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") .call(xAxis); vis.append("svg:g") .attr("class", "y axis") .attr("transform", "translate(" + (MARGINS.left) + ",0)") .call(yAxis);
Ora dichiariamo la funzione line() di D3.js, questa prende i punti X e Y e li applica alle variabili di proporzione che abbiamo dichiarato precedentemente.
var disegna = d3.svg.line()
.x(function (d) {
return x(d.x);
})
.y(function (d) {
return y(d.y);
})
.interpolate('linear');Infine alleghiamo al <svg>, l'elemento path disegnando i punti precedenti attraverso la funzione "disegna()":
vis.append("svg:path").attr("d", disegna(punti)) .attr("stroke", "blue") .attr("stroke-width", 2) .attr("fill", "none");
Ci Siamo!! Ora puoi aprire il tuo programma sul browser e vedrai che i punti saranno disegnati in un grafico lineare.
Per rendere il programma più efficace puoi caricare i punti in modo dinamico da un server backend.
Grazie per aver seguito questa guida su come creare un grafico usando Javascript e D3.js, se la guida ti è piaciuta, condividila con i tuoi amici e metti mi piace, ci aiuteresti molto. Grazie
