d3.js
Approcci per creare grafici responsive d3.js
Ricerca…
Sintassi
- var width = document.getElementById ('chartArea'). clientWidth;
- altezza var = larghezza / 3.236;
- window.onresize = resizeFunctionCall;
Usando il bootstrap
Un approccio che viene spesso utilizzato è quello di utilizzare il framework grigliato di bootstrap per definire l'area in cui il grafico sarà presente. Usando questo insieme alla variabile clientWidth e all'evento window.onresize , è molto facile creare SVG responsive d3 .
Per prima cosa creiamo una riga e una colonna in cui verrà costruito il nostro grafico.
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-6" id="chartArea">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.js"></script>
<script src="chart.js"></script>
</body>
</html>
Questo creerà una colonna che sarà a schermo intero su dispositivo mobile e metà su un grande schermo.
chart.js
var width = document.getElementById('chartArea').clientWidth;
//this allows us to collect the width of the div where the SVG will go.
var height = width / 3.236;
//I like to use the golden rectangle ratio if they work for my charts.
var svg = d3.select('#chartArea').append('svg');
//We add our svg to the div area
//We will build a basic function to handle window resizing.
function resize() {
width = document.getElementById('chartArea').clientWidth;
height = width / 3.236;
d3.select('#chartArea svg')
.attr('width', width)
.attr('height', height);
}
window.onresize = resize;
//Call our resize function if the window size is changed.
Questo è un esempio estremamente semplificato, ma copre i concetti di base su come impostare i grafici per essere reattivi. La funzione di ridimensionamento dovrà effettuare una chiamata alla funzione di aggiornamento principale che ridisegnerà tutti i percorsi, gli assi e le forme come se i dati sottostanti fossero stati aggiornati. La maggior parte degli utenti di d3 che si occupano di visualizzazioni reattive sapranno già come creare i propri eventi di aggiornamento in funzioni facili da chiamare, come mostrato nell'argomento di introduzione e in questo argomento .