Biểu đồ hình tròn đáp ứng bằng cách sử dụng NVD3

Question

Tôi đang làm việc trên một ví dụ đơn giản về biểu đồ hình tròn sử dụng NVD3. Nó hiển thị chính xác nhưng nó không đáp ứng. Tôi đã cố gắng theo dõi this answer để làm cho nó đáp ứng, nhưng không hoàn toàn nhận được nó.

Tôi đã thực hiện fiddle. Thật vậy, nó là đáp ứng, nhưng tôi không thể phù hợp với biểu đồ trong container. Mã js của tôi:

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

Tôi làm cách nào để biểu đồ phù hợp với div có kích thước phần trăm?

Answer 1

Xong. Thuộc tính viewBox liệt kê chiều rộng tối thiểu, chiều cao tối thiểu, chiều rộng và chiều cao của biểu đồ, theo thứ tự đó. Vì vậy, tôi thay đổi hai giá trị cuối cùng để sử dụng chiều rộng và chiều cao thay thế. Và đặt một thuộc tính min-height trong css chỉ để làm cho nó thích nghi với việc thay đổi kích thước cửa sổ.

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

Và fiddle.

Một lựa chọn khác là sử dụng cập nhật) phương pháp của 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; 
});