D3.js：在其父 div 中居中响应饼图

Question

我知道当我弄清楚时我可能会面对手掌，但我正在尝试将响应式饼图水平居中（无论它增长到什么大小）。尽管我知道解决方案应该很简单，但我一定是在苦苦挣扎。

谢谢你同情我。

Fiddle here.

一些 CSS：

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

Answer 1

您需要删除 preserveAspectRatio attr，第 19 行。（响应式工作）。

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>