d3.js
Подходы к созданию отзывчивых диаграмм d3.js
Поиск…
Синтаксис
- var width = document.getElementById ('chartArea'). clientWidth;
- var height = width / 3.236;
- window.onresize = resizeFunctionCall;
Использование бутстрапа
Один из подходов, который часто используется, заключается в том, чтобы использовать фреймворк с начальной сеткой бутстрапа , чтобы определить область, в которой будет существовать диаграмма. Используя это в сочетании с переменной clientWidth и событием window.onresize , очень легко создавать clientWidth d3 ,
Давайте сначала создадим строку и столбец, в которые будет встроена наша диаграмма.
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>
Это создаст колумбу, который будет отображаться на мобильном устройстве в полноэкранном режиме, а половина - на большом экране.
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.
Это чрезвычайно упрощенный пример, но он охватывает основные понятия, как настроить диаграммы для реагирования. Функция изменения размера должна сделать вызов вашей основной функции обновления, которая будет перерисовывать все пути, ось и формы так же, как если бы базовые данные были обновлены. Большинство пользователей d3, которые занимаются гибкой визуализацией, уже знают, как создавать свои события обновления в функции, которые легко вызвать, как показано в вводной теме и в этом разделе .