D3.js : Centrage d'un camembert réactif dans son div parent

Question

Je sais que je vais probablement avoir la paume de la main quand je trouverai la solution, mais j'essaie de centrer horizontalement un graphique circulaire réactif (quelle que soit sa taille). Je dois avoir le cerveau grillé parce que j'ai du mal, même si je sais que la solution devrait être simple.

Merci d'avoir eu pitié de moi.

Fiddle ici.

Quelques CSS :

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

Answer 1

Vous devez retirer preserveAspectRatio attr, ligne 19. (Le fonctionnement réactif).

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>