सवाल उत्तरदायी डी 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>

46
2017-07-13 03:01


मूल


के संभावित डुप्लिकेट D3.js विज़ुअलाइजेशन लेआउट उत्तरदायी बनाने का सबसे अच्छा तरीका क्या है? - user456584


जवाब:


आप संयोजन के उपयोग से चार्ट का आकार बदल सकते हैं 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 इस विधि के साथ हैंडलर।


110
2017-10-15 11:15



इस पर मदद के लिए बहुत धन्यवाद! मैं विशेष रूप से इसकी सराहना करता हूं क्योंकि यह बहुत लंबे समय तक अनुत्तरित / निष्क्रिय था! - TechyDude
@TechyDude, कोई समस्या नहीं- मुझे यह खुद की जरूरत है और आपका सवाल देखा। मुझे कहीं और अच्छा जवाब नहीं मिला, इसलिए आपका उदाहरण बढ़ाया गया। - Sam Sehnert
@ सैमसेनर्ट, उत्तर के लिए धन्यवाद, मैंने यहां कुछ ऐसा ही किया है jsfiddle.net/adityap16/11edxrnq/1 । लेकिन जब मैं इसे प्रतिक्रिया में पोर्ट कर रहा हूं तो मेरे भूखंड वास्तव में छोटे हो रहे हैं, क्या आप किसी भी कारण से सोच सकते हैं? - Aditya Patel
मेरा सुपरस्टार अवतार! - David Anderton
धन्यवाद @ सैमसेनर्ट - smonff


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

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

6
2017-07-13 14:26



आपकी प्रतिक्रिया लार्स के लिए धन्यवाद! यह निश्चित रूप से विंडो पेज के आधार पर चार्ट का आकार बदलने के मामले में काम करता है। मैं ब्राउज़र विंडो के साथ इसका आकार कैसे बदलूं? - TechyDude
आप इसका उपयोग कर सकते हैं onresize घटना (उदाहरण देखें यह प्रश्न) लेकिन आपको खुद को फिर से लेना होगा। - Lars Kotthoff