CODEWITHSUNDEEP
javascriptcssd3.jssvgcenter
daveycroqet
daveycroqet

Reputation: 2727

D3.js: Centering a responsive pie chart in its parent div

I know I'm probably going to face-palm when I figure it out, but I'm trying to horizontally center a responsive pie chart (no matter what size it grows to). I must be brain fried because I'm struggling, even though I know the solution should be simple.

Thank you for taking pity on me.

Fiddle here.

Some CSS:

.chart-container {
  width:100%;
  height:50%;
  border: 1px dotted silver;
}

Upvotes: 3

Views: 2085

Answers (1)

user2226755
user2226755

Reputation: 13159

You need to remove preserveAspectRatio attr, line 19. (The responsive working).

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 + ")");


$(function(){
    var $container = $('.chart-container'),
        τ = 2 * Math.PI,
        width = $container.width(),
        height = $container.height(),
        outerRadius = Math.min(width,height)/2,
        innerRadius = (outerRadius/5)*4,
        fontSize = (Math.min(width,height)/4);
    
    var arc = d3.svg.arc()
        .innerRadius(innerRadius)
        .outerRadius(outerRadius)
        .startAngle(0);

    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 + ")");

    var text = svg.append("text")
        .text('0%')
        .attr("text-anchor", "middle")
        .style("font-size",fontSize+'px')
        .attr("dy",fontSize/3)
        .attr("dx",2);
    
    var background = svg.append("path")
        .datum({endAngle: τ})
        .style("fill", "#7cc35f")
        .attr("d", arc);

    var foreground = svg.append("path")
        .datum({endAngle: 0 * τ})
        .style("fill", "#57893e")
        .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);
                
                text.text(Math.round((d.endAngle/τ)*100)+'%');
                
                return arc(d);
            };
        });
    }
});
html,
body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}

.chart-container {
  width:100%;
  height:50%;
  border: 1px dotted silver;
}

svg text{
font-size: 1em;
font-family: sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>

<div class="chart-container"></div>

Upvotes: 2

Related Questions