d3.js
Podejścia do tworzenia responsywnych wykresów d3.js
Szukaj…
Składnia
- var width = document.getElementById ('chartArea'). clientWidth;
- var wysokość = szerokość / 3.236;
- window.onresize = resizeFunctionCall;
Za pomocą bootstrap
Jednym z często stosowanych podejść jest użycie szkieletowej struktury bootstrap w celu zdefiniowania obszaru, w którym będzie istniał wykres. Używając tego w połączeniu ze zmienną clientWidth i zdarzeniem window.onresize , bardzo łatwo jest stworzyć responsywne pliki SVG d3 .
Najpierw utwórzmy wiersz i kolumnę, w której będzie wbudowany nasz wykres.
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>
Spowoduje to utworzenie kolumny, która będzie pełnoekranowa na urządzeniu mobilnym, a połowa na dużym ekranie.
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.
Jest to niezwykle uproszczony przykład, ale obejmuje podstawowe pojęcia dotyczące konfigurowania wykresów, aby były responsywne. Funkcja zmiany rozmiaru będzie musiała wywołać główną funkcję aktualizacji, która przerysuje wszystkie ścieżki, oś i kształty, tak jakby zaktualizowane zostały podstawowe dane. Większość użytkowników d3, którzy są zainteresowani responsywnymi wizualizacjami, będzie już wiedziała, jak wbudować swoje zdarzenia aktualizacji w funkcje łatwe do wywołania, jak pokazano w temacie wprowadzenia i tym temacie .