d3.js
Benaderingen om responsieve d3.js-grafieken te maken
Zoeken…
Syntaxis
- var width = document.getElementById ('chartArea'). clientWidth;
- var hoogte = breedte / 3.236;
- window.onresize = resizeFunctionCall;
Bootstrap gebruiken
Een benadering die vaak wordt gebruikt, is het gebruik van het geraamte framework van bootstrap om het gebied te definiëren waarin de grafiek zal bestaan. Met dit in combinatie met de clientWidth variabele en de gebeurtenis window.onresize is het zeer eenvoudig om responsieve d3 SVG's te maken .
Laten we eerst een rij en een kolom maken waarin onze grafiek wordt ingebouwd.
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>
Hiermee maakt u een kolom die op een volledig mobiel scherm en half op een groot scherm wordt weergegeven.
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.
Dit is een uiterst vereenvoudigd voorbeeld, maar behandelt de basisconcepten van hoe u grafieken kunt instellen om responsief te zijn. De functie voor het wijzigen van de grootte moet de hoofdupdatefunctie gebruiken om alle paden, assen en vormen opnieuw te tekenen, alsof de onderliggende gegevens zijn bijgewerkt. De meeste d3-gebruikers die zich bezighouden met responsieve visualisaties, zullen al weten hoe ze hun update-evenementen kunnen inbouwen in functies die gemakkelijk kunnen worden opgeroepen, zoals getoond in het intro-onderwerp en dit onderwerp .