d3.js
Ansätze zum Erstellen von responsiven d3.js-Diagrammen
Suche…
Syntax
- var width = document.getElementById ('chartArea'). clientWidth;
- Var Höhe = Breite / 3,236;
- window.onresize = resizeFunctionCall;
Bootstrap verwenden
Ein Ansatz, der häufig verwendet wird, ist die Verwendung des gerasterten Frameworks von bootstrap , um den Bereich zu definieren, in dem das Diagramm vorhanden ist. Wenn Sie dies in Verbindung mit der Variable clientWidth und dem window.onresize , ist es sehr einfach, responsive d3-SVGs zu erstellen .
Zuerst erstellen wir eine Zeile und eine Spalte, in die unser Diagramm eingebaut wird.
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>
Dadurch wird eine Kolumne erstellt, die auf dem mobilen Gerät als Vollbild und auf einem großen Bildschirm zur Hälfte angezeigt wird.
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.
Dies ist ein extrem vereinfachtes Beispiel, deckt jedoch die grundlegenden Konzepte für das Einrichten von Diagrammen ab. Die Größenänderungsfunktion muss Ihre Hauptaktualisierungsfunktion aufrufen, die alle Pfade, Achsen und Formen neu zeichnet, als ob die zugrunde liegenden Daten aktualisiert worden wären. Die meisten D3-Benutzer, die sich mit responsiven Visualisierungen beschäftigen, wissen bereits, wie sie ihre Update-Events in Funktionen umwandeln können, die einfach aufgerufen werden können, wie im Intro-Thema und in diesem Thema beschrieben .