61

I have this D3 chart - pretty much out of the box. Is there a way to make it responsive and use percentages for the width and height variables, innerRadius, and outerRadius? I'm workign on a responsive site and need this to change based on screen size/browser size.

jsfiddle here: http://jsfiddle.net/BTfmH/1/

Code:

<!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>
1

2 Answers 2

142

You can make the chart resize using a combination of viewBox and preserveAspectRatio attributes on the SVG element.

See this jsfiddle for the full example: 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 + ")");

You won't even need a resize handler with this method.

5
  • THANKS so much for help on this! I especially appreciate this since it was unanswered / idle for so long!
    – TechyDude
    Oct 16, 2013 at 4:01
  • 1
    @TechyDude, No problem—I needed this myself and saw your question. I couldn't find a good answer elsewhere so extended your example. Oct 17, 2013 at 11:35
  • 1
    @SamSehnert , Thanks for the answer, I have done something similar here in jsfiddle.net/adityap16/11edxrnq/1 . But when i am porting it in React my plots are becoming really small, Can you think of any reason why? Apr 5, 2016 at 13:34
  • My superstar incarnate!
    – David
    Dec 5, 2016 at 17:03
  • Thanks @SamSehnert
    – smonff
    Mar 9, 2018 at 16:38
6

You can use window.innerWidth and window.innerHeight to get the dimensions of the screen and set up your graph accordingly, e.g.

var width = window.innerWidth,
    height = window.innerHeight,
    innerRadius = Math.min(width,height)/3,
    outerRadius = innerRadius + 30;
2
  • Thanks for your response Lars! That does definitely work in terms of sizing the charts based on the window page. How would I make it resize with the browser window?
    – TechyDude
    Jul 13, 2013 at 15:51
  • You can use the onresize event (see e.g. this question) but you would have to redraw yourself. Jul 14, 2013 at 0:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.