2dimple.js/d3.js 창 크기가 바뀔 때 자동 크기 차트

Question

dimple.js를 사용하여 차트를 그리는 다음 코드가 있습니다. http://jsbin.com/zacus/17/ 브라우저 창 크기를 조정하거나 jsbin 창 크기를 조정할 때 차트를 표 셀 부모에 맞게 크기를 조절할 수도 있습니다. 예제에서 알 수 있듯이 이것은 발생하지 않습니다. 차트의 너비를 변경하거나 사용할 때 차트를 다시 그리기 위해 이벤트 처리기를 작성하려고 시도했습니다.

window.onresize= function redraw(){ 
    chart1.setBounds(70, 30, pTd.offsetWidth-150, 300); 
    myLegend1.left = chart1.width + 100; 
} 

어떻게해야합니까?

편집 : 약간의 실험은 내 문제를 해결하는 것으로 보이는 다음 코드로 안내했습니다. 이것을 달성하는 가장 좋은 방법입니까?

chart1.svg.attr("width", "100%") 
    .attr("height", "100%") 
    .attr("viewBox", "0 0 600 400"); 

Answer 1

viewBox로 시도하지 않았으므로 작동하는 경우 좋은 해결책이 들립니다. 차트의 비율은 setMargins이고 크기는 chart.draw입니다. 예를 들어 차트가 너무 작아지면 x 축 레이블을 회전하는 등의 딤플 크기 조정 논리를 사용하면 이점이 있습니다. 여기

웹 사이트에서 예제 :

// Set up a standard chart 
var myChart; 
d3.tsv("/data/example_data.tsv", function (data) { 
    myChart = new dimple.chart(svg, data); 

    // Fix the margins 
    myChart.setMargins("60px", "30px", "110px", "70px"); 

    // Continue to set up a standard chart 
    myChart.addCategoryAxis("x", "Month").addOrderRule("Date"); 
    myChart.addMeasureAxis("y", "Unit Sales"); 
    myChart.addSeries("Channel", dimple.plot.bar); 

    // Set the legend using negative values to set the co-ordinate from the right 
    myChart.addLegend("-100px", "30px", "100px", "-70px"); 
    myChart.draw(); 
}); 

// Add a method to draw the chart on resize of the window 
window.onresize = function() { 
    // As of 1.1.0 the second parameter here allows you to draw 
    // without reprocessing data. This saves a lot on performance 
    // when you know the data won't have changed. 
    myChart.draw(0, true); 
}; 

Here it is in action