d3.js
Approches pour créer des graphiques réactifs d3.js
Recherche…
Syntaxe
- var width = document.getElementById ('chartArea'). clientWidth;
- var height = width / 3.236;
- window.onresize = resizeFunctionCall;
Utiliser le bootstrap
Une approche souvent utilisée consiste à utiliser le cadre quadrillé de bootstrap afin de définir la zone dans laquelle le graphique existera. En utilisant ceci en conjonction avec la variable clientWidth et l'événement window.onresize , il est très facile de créer des SVG d3 réactifs. .
Créons d'abord une ligne et une colonne dans lesquelles notre graphique sera intégré.
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>
Cela va créer une colonne qui sera en plein écran sur un appareil mobile et l'autre moitié sur un grand écran.
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.
Ceci est un exemple extrêmement simplifié, mais couvre les concepts de base de la configuration des graphiques pour qu'ils soient réactifs. La fonction de redimensionnement devra appeler votre fonction de mise à jour principale pour redessiner tous les chemins, axes et formes, comme si les données sous-jacentes avaient été mises à jour. La plupart des utilisateurs de d3 concernés par les visualisations réactives sauront déjà comment créer leurs événements de mise à jour en fonctions faciles à appeler, comme indiqué dans la rubrique d'introduction et dans cette rubrique .