Responsywny wykres kołowy za pomocą NVD3

Question

Pracuję nad prostym przykładem wykresu kołowego przy użyciu NVD3. Wykonuje renderowanie poprawnie, ale nie reaguje. Próbowałem podążać za numerem this answer, aby był responsywny, ale nie do końca do niego dotarłem.

Zrobiłem fiddle. Rzeczywiście, jest responsywny, ale nie jestem w stanie dopasować wykresu do kontenera. Mój kod 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 
    } 
]; 

Jak mogę prawidłowo dopasować wykres do jednostki div o wielkości procentowej?

Answer 1

Gotowe. Atrybut viewBox wyświetla minimalną szerokość, minimalną wysokość, szerokość i wysokość wykresu, w tej kolejności. Tak więc zmieniłem dwie ostatnie wartości, aby zamiast tego używać szerokości i wysokości. I umieść właściwość min-height w css, aby dostosować ją do zmieniającego się rozmiaru okna.

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

I fiddle.

Innym rozwiązaniem jest użycie update() metodę NV:

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; 
});