d3.js
उत्तरदायी d3.js चार्ट बनाने के लिए दृष्टिकोण
खोज…
वाक्य - विन्यास
- var चौड़ाई = document.getElementById ('chartArea')। clientWidth;
- var ऊंचाई = चौड़ाई / 3.236;
- window.onresize = resizeFunctionCall;
बूटस्ट्रैप का उपयोग करना
एक दृष्टिकोण जो अक्सर नियोजित होता है वह है बूटस्ट्रैप के ग्रिड वाले ढांचे का उपयोग उस क्षेत्र को परिभाषित करने के लिए जिसमें चार्ट मौजूद होगा। clientWidth चर और window.onresize इवेंट के साथ संयोजन के साथ, यह उत्तरदायी d3 SVGs बनाना बहुत आसान है। ।
आइए सबसे पहले एक पंक्ति और एक कॉलम बनाएं जिसे हमारा चार्ट बनाया जाएगा।
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 उपयोगकर्ता जो उत्तरदायी विज़ुअलाइज़ेशन से संबंधित हैं, उन्हें पहले से ही पता चल जाएगा कि अपने अपडेट इवेंट्स को फ़ंक्शंस में कैसे बनाया जाए जो इंट्रो विषय और इस विषय में दिखाए गए अनुसार कॉल करना आसान है।