d3.js
Metoder för att skapa responsiva d3.js-diagram
Sök…
Syntax
- var width = document.getElementById ('chartArea'). clientWidth;
- var höjd = bredd / 3,236;
- windows.onresize = resizeFunctionCall;
Med hjälp av bootstrap
Ett tillvägagångssätt som ofta används är att använda bootstraps gridade ramverk för att definiera det område som diagrammet kommer att existera i. Använda detta i samband med clientWidth variabeln och händelsen window.onresize , är det mycket lätt att skapa responsiva d3 SVGs .
Låt oss först skapa en rad och en kolumn som vårt diagram kommer att byggas in.
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>
Detta kommer att skapa ett kolum som kommer att vara fullskärm på mobil enhet och hälften på en stor skärm.
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.
Detta är ett extremt förenklat exempel, men täcker de grundläggande koncepten för hur man ställer in diagram för att vara lyhörda. Storleksändringsfunktionen måste ringa till din huvuduppdateringsfunktion som kommer att rita om alla sökvägar, axlar och former precis som om de underliggande data hade uppdaterats. De flesta d3-användare som är upptagna med lyhörda visualiseringar vet redan hur man bygger uppdateringshändelserna till funktioner som är enkla att ringa som visas i introämnet och det här ämnet .