उत्तरदायी डी 3 चार्ट

मेरे पास यह डी 3 चार्ट है - बॉक्स से काफी अधिक है। क्या इसे उत्तरदायी बनाने और चौड़ाई और ऊंचाई चर, आंतरिक त्रिज्या, और बाहरी त्रिज्या के प्रतिशत का उपयोग करने का कोई तरीका है? मैं एक उत्तरदायी साइट पर काम कर रहा हूं और इसे स्क्रीन आकार/ब्राउज़र आकार के आधार पर बदलने की आवश्यकता है।उत्तरदायी डी 3 चार्ट

यहाँ jsfiddle: http://jsfiddle.net/BTfmH/1/

कोड:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style type="text/css"> 
html, 
body { 
    margin:0; 
    padding:0; 
    width:100%; 
    height:100%; 
} 

.chart-container { 
/* width:50%; 
    height:50%;*/ 
} 
</style> 
<body> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script> 
    var width = 350, 
     height = 350, 
     τ = 2 * Math.PI; 

    var arc = d3.svg.arc() 
     .innerRadius(100) 
     .outerRadius(135) 
     .startAngle(0); 

var svg = d3.select("body").append("svg") 
     .attr("width", width) 
     .attr("height", height) 
    .append("g") 
     .attr("transform", "translate(" + width/2 + "," + height/2 + ")") 

    var background = svg.append("path") 
     .datum({endAngle: τ}) 
     .style("fill", "green") 
     .attr("d", arc); 

    var foreground = svg.append("path") 
    .datum({endAngle: .127 * τ}) 
     .style("fill", "grey") 
     .attr("d", arc); 

setInterval(function() { 
    foreground.transition() 
     .duration(750) 
     .call(arcTween, Math.random() * τ); 
}, 1500); 

    function arcTween(transition, newAngle) { 

    transition.attrTween("d", function(d) { 

     var interpolate = d3.interpolate(d.endAngle, newAngle); 

     return function(t) { 

     d.endAngle = interpolate(t); 

     return arc(d); 
     }; 
    }); 
} 
</script>

स्रोत

2013-07-13 TechyDude

संभावित डुप्लिकेट [क्या d3.js विज़ुअलाइज़ेशन लेआउट उत्तरदायी बनाने का सबसे अच्छा तरीका है?] (Http://stackoverflow.com/questions/9400615/whats-the-best-way-to-make-a-d3 -जेएस-विज़ुअलाइजेशन-लेआउट-उत्तरदायी) – user456584

102

आप चार्ट आकार एसवीजी तत्व पर viewBox और preserveAspectRatio विशेषताओं के संयोजन का उपयोग कर सकते हैं।

पूर्ण उदाहरण के लिए इस jsfiddle देखें: http://jsfiddle.net/BTfmH/12/

var svg = d3.select('.chart-container').append("svg") 
    .attr("width", '100%') 
    .attr("height", '100%') 
    .attr('viewBox','0 0 '+Math.min(width,height)+' '+Math.min(width,height)) 
    .attr('preserveAspectRatio','xMinYMin') 
    .append("g") 
    .attr("transform", "translate(" + Math.min(width,height)/2 + "," + Math.min(width,height)/2 + ")");

तुम भी इस विधि के साथ एक resize हैंडलर जरूरत नहीं होगी।

स्रोत

2013-10-15 11:15:09

इस पर मदद के लिए बहुत बहुत धन्यवाद! मैं विशेष रूप से इसकी सराहना करता हूं क्योंकि यह बहुत लंबे समय तक अनुत्तरित/निष्क्रिय था! – TechyDude

@TechyDude, कोई समस्या नहीं- मुझे इसे स्वयं चाहिए और आपका प्रश्न देखा। मुझे कहीं और अच्छा जवाब नहीं मिला, इसलिए आपका उदाहरण बढ़ाया गया। –

@ सैमसेनर्ट, उत्तर के लिए धन्यवाद, मैंने https://jsfiddle.net/adityap16/11edxrnq/1/ में कुछ ऐसा ही किया है। लेकिन जब मैं इसे प्रतिक्रिया में पोर्ट कर रहा हूं तो मेरे भूखंड वास्तव में छोटे हो रहे हैं, क्या आप किसी भी कारण से सोच सकते हैं? –

आप उपयोग कर सकते हैं window.innerWidth और window.innerHeight स्क्रीन के आयाम मिलता है और उसके अनुसार अपनी ग्राफ स्थापित करने के लिए है, उदा

var width = window.innerWidth, 
    height = window.innerHeight, 
    innerRadius = Math.min(width,height)/3, 
    outerRadius = innerRadius + 30;

स्रोत

2013-07-13 14:26:35

आपकी प्रतिक्रिया लार्स के लिए धन्यवाद! यह निश्चित रूप से विंडो पेज के आधार पर चार्ट का आकार बदलने के मामले में काम करता है। मैं ब्राउज़र विंडो के साथ इसका आकार कैसे बदलूं? – TechyDude

आप 'ऑन्रेसइज' ईवेंट का उपयोग कर सकते हैं (उदा। [यह प्रश्न] देखें (http://stackoverflow.com/questions/641857/javascript-window-resize-event)) लेकिन आपको खुद को फिर से लेना होगा। –

उत्तरदायी डी 3 चार्ट

उत्तर

संबंधित मुद्दे