Grafico a torta reattivo con NVD3

Question

Sto lavorando ad un semplice esempio di grafico a torta usando NVD3. Rende correttamente ma non è reattivo. Ho provato a seguire this answer per renderlo reattivo, ma non ci sono riuscito.

Ho creato un fiddle. In effetti, è reattivo, ma non sono in grado di adattare il grafico nel contenitore. Il mio codice 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 
    } 
]; 

Come si può fare in modo che il grafico si adatti correttamente a un div di dimensione percentuale?

Answer 1

Fatto. L'attributo viewBox elenca la larghezza minima, l'altezza minima, la larghezza e l'altezza del grafico, in questo ordine. Quindi, ho cambiato gli ultimi due valori per utilizzare invece larghezza e altezza. E metti una proprietà di altezza minima nel css solo per adattarla alla modifica della dimensione della finestra.

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

E il fiddle.

Un'altra opzione è quella di utilizzare il metodo del nv aggiornamento():

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