दिलचस्प पोस्ट
अजाक्स के साथ एमवीसी 4 का उपयोग करते हुए फ़ाइल अपलोड करें जब 'बैक' बटन को एक नवबार पर दबाया जाता है, तब पता लगा रहा है क्या मुझे चिह्नित फाइलों की सूची मिल सकती है – स्यूम-अपरिवर्तित? पायथन: _imagingf सी मॉड्यूल स्थापित नहीं है Filezilla और SFTP का उपयोग करते हुए अमेज़ॅन EC2 फ़ाइल निर्देशिका से कनेक्ट करें बैकग्राउंड सर्विस से सेंडवेंट या अन्य तरह से छूने का तरीका कैसे अनुकरण करना है? नल योग्य प्रकार एक नल योग्य प्रकार नहीं है? IE10 में स्क्रॉलबार ओवरले, आप इसे कैसे रोकते हैं? एक सेट (अधिकतम कुशलतापूर्वक) के उत्पन्न क्रमांतरण जांचें कि क्या कोई स्ट्रिंग एक तिथि मान है दो नंबरों का हैशोड बनाएं पाठ फ़ाइल की अंतिम पंक्ति को तुरंत पढ़ें? ActionItem के लिए एनिमेटेड आइकन बैकबोन: ईवेंट फिर से रेंडर में खो गया जावा क्लास के प्रोग्राममैटिक रूप से संकलित और इंस्टाल्ट कैसे करें?

SVG का आकार बदलें जब विंडो को d3.js में बदल दिया जाता है

मैं d3.js. के साथ एक स्कैटरप्लॉट खींच रहा हूं। इस प्रश्न की मदद से:
स्क्रीन के आकार, वर्तमान वेब पेज और ब्राउज़र विंडो को प्राप्त करें

मैं इस उत्तर का उपयोग कर रहा हूं:

var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0], x = w.innerWidth || e.clientWidth || g.clientWidth, y = w.innerHeight|| e.clientHeight|| g.clientHeight; 

तो मैं इस तरह से उपयोगकर्ता की खिड़की में मेरी भूखंड को फिट करने में सक्षम हूं:

 var svg = d3.select("body").append("svg") .attr("width", x) .attr("height", y) .append("g"); 

अब मैं चाहूंगा कि कुछ साजिश का आकार बदलने का ख्याल रखता है जब उपयोगकर्ता विंडो का आकार बदलता है।

पुनश्च: मैं अपने कोड में jQuery का उपयोग नहीं कर रहा हूँ।

वेब के समाधान से एकत्रित समाधान "SVG का आकार बदलें जब विंडो को d3.js में बदल दिया जाता है"

'उत्तरदायी एसवीजी' के लिए देखो यह एक एसवीजी उत्तरदायी बनाने के लिए बहुत आसान है और आप किसी भी अधिक आकार के बारे में चिंता करने की ज़रूरत नहीं है।

यहाँ देखें कि मैंने यह कैसे किया:

 d3.select("div#chartId") .append("div") .classed("svg-container", true) //container class to make it responsive .append("svg") //responsive SVG needs these 2 attributes and no width and height attr .attr("preserveAspectRatio", "xMinYMin meet") .attr("viewBox", "0 0 600 400") //class to make it responsive .classed("svg-content-responsive", true); 

सीएसएस कोड:

 .svg-container { display: inline-block; position: relative; width: 100%; padding-bottom: 100%; /* aspect ratio */ vertical-align: top; overflow: hidden; } .svg-content-responsive { display: inline-block; position: absolute; top: 10px; left: 0; } 

अधिक जानकारी / ट्यूटोरियल:

http://thenewcode.com/744/Make-SVG-Responsive

http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php

खिड़की का उपयोग करें।

 function updateWindow(){ x = w.innerWidth || e.clientWidth || g.clientWidth; y = w.innerHeight|| e.clientHeight|| g.clientHeight; svg.attr("width", x).attr("height", y); } d3.select(window).on('resize.updatesvg', updateWindow); 

http://jsfiddle.net/Zb85u/1/

अद्यतित बस @ सेमीमाटी से नया तरीका उपयोग करें


ऐतिहासिक प्रयोजनों के लिए पुराने उत्तर

आईएमओ यह बेहतर है कि चयन () और () का उपयोग करने के लिए उस तरीके से आप कई रिसाइज ईवेंट हैंडलर्स बना सकते हैं … बस बहुत पागल नहीं हो

 d3.select(window).on('resize', resize); function resize() { // update width width = parseInt(d3.select('#chart').style('width'), 10); width = width - margin.left - margin.right; // resize the chart x.range([0, width]); d3.select(chart.node().parentNode) .style('height', (y.rangeExtent()[1] + margin.top + margin.bottom) + 'px') .style('width', (width + margin.left + margin.right) + 'px'); chart.selectAll('rect.background') .attr('width', width); chart.selectAll('rect.percent') .attr('width', function(d) { return x(d.percent); }); // update median ticks var median = d3.median(chart.selectAll('.bar').data(), function(d) { return d.percent; }); chart.selectAll('line.median') .attr('x1', x(median)) .attr('x2', x(median)); // update axes chart.select('.x.axis.top').call(xAxis.orient('top')); chart.select('.x.axis.bottom').call(xAxis.orient('bottom')); } 

http://eyeseast.github.io/visible-data/2013/08/28/responsive-charts-with-d3/

यह बदसूरत है अगर रीसाइज़िंग कोड लगभग ग्राम को पहली जगह में बनाने के लिए कोड के रूप में लंबे समय तक है। इसलिए मौजूदा चार्ट के प्रत्येक तत्व का आकार बदलने के बजाय, बस इसे पुनः लोड क्यों नहीं किया जा रहा है? यहां मेरे लिए यह कैसे काम किया है:

 function data_display(data){ e = document.getElementById('data-div'); var w = e.clientWidth; // remove old svg if any -- otherwise resizing adds a second one d3.select('svg').remove(); // create canvas var svg = d3.select('#data-div').append('svg') .attr('height', 100) .attr('width', w); // now add lots of beautiful elements to your graph // ... } data_display(my_data); // call on page load window.addEventListener('resize', function(event){ data_display(my_data); // just call it again... } 

महत्वपूर्ण पंक्ति डी 3 है। d3.select('svg').remove(); । अन्यथा प्रत्येक रीसाइज़िंग पिछले एक से नीचे एक और एसवीजी तत्व जोड़ देगा।

केवल 'ऊँचाई' और 'चौड़ाई' की विशेषताओं को सेट करने के लिए लेआउट में प्लॉट को एसटीवीजी कंटेनर में फिर से केंद्र / स्थानांतरित करने के लिए काम नहीं किया जाएगा। हालांकि, यहां एक बहुत ही सरल उत्तर दिया गया है जो यहां मिले फोर्स लेआउट के लिए काम करता है । संक्षेप में:

उसी तरह का (किसी भी) इवेंटिंग का प्रयोग करें

 window.on('resize', resize); 

फिर मान लें कि आपके पास एसवीजी और फोर्स चर हैं:

 var svg = /* D3 Code */; var force = /* D3 Code */; function resize(e){ // get width/height with container selector (body also works) // or use other method of calculating desired values var width = $('#myselector').width(); var height = $('#myselector').height(); // set attrs and 'resume' force svg.attr('width', width); svg.attr('height', height); force.size([width, height]).resume(); } 

इस तरीके से, आप ग्राफ़ को पूरी तरह से प्रस्तुत नहीं करते हैं, हम विशेषताओं को सेट करते हैं और डी 3 को आवश्यकतानुसार पुनः गणना करते हैं। यह कम से कम काम करता है जब आप गुरुत्वाकर्षण के एक बिंदु का उपयोग करते हैं। मुझे यकीन नहीं है कि यह इस समाधान के लिए एक पूर्वापेक्षा है। क्या कोई पुष्टि या अस्वीकार कर सकता है?

चीयर्स, जी