Responsive Kreisdiagramm mit NVD3

Question

Ich arbeite an einem einfachen Beispiel für ein Kreisdiagramm mit NVD3. Es wird korrekt gerendert, reagiert jedoch nicht. Ich habe versucht, zu folgen, um es ansprechbar zu machen, aber bin nicht ganz dazu gekommen.

Ich machte eine fiddle. In der Tat reagiert es, aber ich kann das Diagramm nicht in den Container passen. Mein Js-Code:

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

Wie kann ich das Diagramm richtig in einem Prozentsatz div passen?

Answer 1

Fertig. Das Attribut viewBox listet die Mindestbreite, Mindesthöhe, Breite und Höhe des Diagramms in dieser Reihenfolge auf. Also habe ich die letzten beiden Werte geändert, um stattdessen Breite und Höhe zu verwenden. Und fügen Sie eine Eigenschaft mit min-height in die CSS ein, um sie an die sich ändernde Fenstergröße anzupassen.

Und die fiddle.

Eine weitere Option ist die NV-Update() Methode zu verwenden:

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