レスポンシブルドーナツチャートd3

Question

私はこのドーナツチャートをちょっと試してみましたが、ちょうどをアスペクト比/ビューボックス方式でレンダリングしません。

これはウィンドウのサイズ変更機能で動作しますが、バグがあります。コンテナを折りたたむことができ、間違ってサイズを変更できます。私はこれを回避することができますが、これをコメントアウトしたコードで動作させるためのヒントはありますか？

元のウィンドウサイズに基づいて、チャートはそれに基づいたディメンションを持ちます。開始時にウィンドウのサイズが間違っているとルックを歪ませる可能性があります。

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

viewBoxの目標は、グラフィックス座標からページ座標を分離することです。したがって .attr('viewBox','0 0 '+width +' '+height) は、[0、幅] x [0、高さ]のグラフィックス座標を与えます。これは、ページ内のsvgのサイズに依存しません。 '0 0'を変更すると、グラフィックス座標の原点を左上隅の代わりに中央に配置することができます（ただし、翻訳されたgのソリューションも有効です）。最後に、preserveAspectRatioは、必要に応じて側面にパディングを追加して画像が伸びていないことを確認します。

ので、全体的に、これは大丈夫動作しますが、1つの問題依然として存在している、だから、あなたに

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')