NVD3を使用した応答円グラフ

Question

NVD3を使用した円グラフの簡単な例を扱っています。それは正しくレンダリングされますが、応答しません。私はそれに応答するようにthis answerに従おうとしましたが、それにはあまり行きませんでした。

私はfiddleを作った。実際、それは反応的ですが、コンテナにグラフを収めることができません。私のjsコード：

nv.addGraph(function() { 
    var chart = nv.models.pieChart() 
    .x(function(d) { return d.label }) 
    .y(function(d) { return d.value }) 
    .showLabels(true); 

    var $container = $('#chart'), 
     width = $container.width(), 
     height = $container.height(); 

    d3.select("#chart svg") 
    .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 + ")") 
    .datum(exampleData) 
    .transition().duration(350) 
    .call(chart); 

    return chart; 
}); 

var exampleData = [ 
    { 
    "label": "One", 
    "value" : 29.765957771107 
    } , 
    { 
    "label": "Two", 
    "value" : 0 
    } , 
    { 
    "label": "Three", 
    "value" : 32.807804682612 
    } , 
    { 
    "label": "Four", 
    "value" : 196.45946739256 
    } , 
    { 
    "label": "Five", 
    "value" : 0.19434030906893 
    } , 
    { 
    "label": "Six", 
    "value" : 98.079782601442 
    } , 
    { 
    "label": "Seven", 
    "value" : 13.925743130903 
    } , 
    { 
    "label": "Eight", 
    "value" : 5.1387322875705 
    } 
]; 

グラフをパーセントパーセンテージで正しくフィットさせるにはどうすればいいですか？

Answer 1

完了。 viewBox属性は、グラフの最小幅、最小高さ、幅、高さをこの順にリストします。だから、最後の2つの値を代わりに幅と高さに変更しました。そして、ウィンドウサイズの変更に合わせて、最小高さのプロパティをCSSに配置します。

.attr('viewBox','0 0 '+width+' '+height) 

およびfiddle。

別のオプションは、ネバダ州のupdate（）メソッドを使用することです：

nv.addGraph(function() { 
    var chart = nv.models.pieChart() 
    .x(function(d) { return d.label }) 
    .y(function(d) { return d.value }) 
    .showLabels(true); 

    var $container = $('#chart'), 
     width = $container.width(), 
     height = $container.height(); 

    d3.select("#chart svg") 
    .datum(exampleData) 
    .transition().duration(350) 
    .call(chart); 

    nv.utils.windowResize(chart.update); 

    return chart; 
});