d3.js
Enfoques para crear gráficos d3.js responsivos
Buscar..
Sintaxis
- var width = document.getElementById ('chartArea'). clientWidth;
- var altura = ancho / 3.236;
- window.onresize = resizeFunctionCall;
Utilizando bootstrap
Un enfoque que se emplea a menudo es usar el marco cuadriculado de bootstrap para definir el área en la que existirá el gráfico. Usando esto junto con la variable clientWidth y el evento window.onresize , es muy fácil crear SVG responsivos d3 .
Primero creamos una fila y una columna en la que se construirá nuestro gráfico.
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>
Esto creará una columna que será a pantalla completa en el dispositivo móvil y la mitad en una pantalla grande.
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.
Este es un ejemplo extremadamente simplificado, pero cubre los conceptos básicos de cómo configurar gráficos para ser receptivos. La función de cambio de tamaño deberá realizar una llamada a la función de actualización principal que redibujará todas las rutas, ejes y formas como si los datos subyacentes se hubieran actualizado. La mayoría de los usuarios de d3 que están preocupados con las visualizaciones de respuesta ya sabrán cómo construir sus eventos de actualización en funciones que son fáciles de llamar, como se muestra en el tema de introducción y este tema .