Responsive Doughnut Chart d3

Question

Ich habe ein wenig mit diesem Donut-Diagramm hantiert, aber es nicht gerade richtig mit dem Aspektverhältnis/viewbox Methode rendern.

Ich habe das mit einer Fenstergrößenanpassung funktioniert, aber es hat einen Fehler - da der Container kann zusammengebrochen werden, kann es die Größe falsch ändern. Ich denke, ich kann das umgehen, aber irgendwelche Tipps, um dies mit dem auskommentierten Code zu arbeiten?

Was passiert, ist, dass basierend auf der ursprünglichen Fenstergröße das Diagramm Dimensionen basierend auf dem ... hat, die das Aussehen verfälschen können, wenn das Fenster beim Start die falsche Größe hat.

https://jsfiddle.net/7rgf09x1/9/

// WORK IN PROGRESS: Responsive using only d3. 
    //  var svg = d3.select('#revenue-chart').append('svg') 
     // .attr('id', 'revenue-chart-render') 
    //  .attr("width", '100%') 
    // .attr("height", '100%') 
    // .attr('viewBox','0 0 '+Math.min(width,height)+' '+Math.min(width,height)) 
    // .attr('preserveAspectRatio','xMinYMin') 
    // .attr("transform", "translate(" + Math.min(width,height)/2 + "," + Math.min(width,height)/2 + ")"); 

Answer 1

Das Ziel der viewBox ist die Seite Koordinaten von den Grafiken Koordinaten zu trennen. So .attr('viewBox','0 0 '+width +' '+height) gibt Ihnen Grafikkoordinaten in [0, Breite] x [0, Höhe]. Dies ist unabhängig von der Größe der Svg auf der Seite. Sie können die '0 0' ändern, um den Ursprung der Grafikkoordinaten in der Mitte anstatt in der oberen linken Ecke zu haben (obwohl Ihre Lösung mit einem übersetzten g auch gültig war). Schließlich stellt preserveAspectRatio sicher, dass Ihr Bild nicht gestreckt wird, indem Sie den Seiten wie erforderlich Polster hinzufügen.

Insgesamt also sollte man

var svg = d3.select('#revenue-chart').append('svg') 
     .attr('id', 'revenue-chart-render') 
     .attr("width", '100%') 
     .attr("height", '100%') 
     .attr('viewBox',(-width/2) + ' ' + (-height/2) + ' '+width +' '+height) 
     .attr('preserveAspectRatio','xMinYMin')